Trying to Draw multiple Rectangle Mark up on camera widget of Mendix
0
my scenario --→ i am capturing a image using camera widget. On image i need draw markup. I am trying to draw rectangle Markup on canvas of camera widget (mendix) ,for that i created one button called markup internally i am calling nanoflow on it using javascript.(this code is working). while i am trying with mendix getting error (404 - file not found for file: mxclientsystem/mxui/mxui.js.map) in the code i am using Mendix camera widget canvas var canvas = document.getElementsByClassName("canvas")[0], Any help would be appreciated. Mendix Version(8.11.1) import { Big } from "big.js"; // BEGIN EXTRA CODE // END EXTRA CODE /** * @returns {Promise.<void>} */ export async function JavaScript_action() { // BEGIN USER CODE //(i used canvas of camera widget here) var canvas = document.getElementsByClassName("canvas")[0], ctx = canvas.getContext('2d'), rect = {}, drag = false; var rectStartXArray = new Array() ; var rectStartYArray = new Array() ; var rectWArray = new Array() ; var rectHArray = new Array() ; function init() { canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove', mouseMove, false); } function mouseDown(e) { rect.startX = e.pageX - this.offsetLeft; rect.startY = e.pageY - this.offsetTop; drag = true; } function mouseUp() { rectStartXArray[rectStartXArray.length] = rect.startX; rectStartYArray[rectStartYArray.length] = rect.startY; rectWArray[rectWArray.length] = rect.w; rectHArray[rectHArray.length] = rect.h; drag = false; } function mouseMove(e) { if (drag) { rect.w = (e.pageX - this.offsetLeft) - rect.startX; rect.h = (e.pageY - this.offsetTop) - rect.startY; ctx.clearRect(0, 0, canvas.width, canvas.height); draw(); } drawOldShapes(); } function draw() { ctx.beginPath(); ctx.rect(rect.startX, rect.startY, rect.w, rect.h); ctx.stroke(); } function drawOldShapes(){ for(var i=0;i<rectStartXArray.length;i++) { if(rectStartXArray[i]!= rect.startX && rectStartYArray[i] != rect.startY && rectWArray[i] != rect.w && rectHArray[i] != rect.h) { ctx.beginPath(); ctx.rect(rectStartXArray[i], rectStartYArray[i], rectWArray[i], rectHArray[i]); ctx.stroke(); } } } init(); // END USER CODE }