Draw scaled rectangles on scaled image canvas

♀尐吖头ヾ 提交于 2021-02-11 18:16:01

问题


I'm working on a project in which i need to draw an image on a canvas and rectangles also to mention the objects present on that image. Rectangles are drawing correct positions if the image is not scaling to fit to the canvas. But if i scaled the image, Rectangles are not getting scaled to meet the correct positions. I have already gone through similar questions/answers present on stackoverflow, but none of them are working in my case or may be i'm not much educated to understand and implement them in a proper way.

Following are the 2 different snippets: Without Image Scale (Drawing Rectangles in correct positions) and With Image Scale(Drawing rectangles on incorrect position)

Difference is just with the commented lines.

ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
//ctx.drawImage(img, 0, 0); // not fitting image to canvas fill

and

ctx.strokeRect(c[0]* scale, c[1]* scale, c[2] * scale , c[3] * scale);
//ctx.strokeRect(c[0], c[1], c[2] , c[3]); //drawing rects on correct position

来源:https://stackoverflow.com/questions/59245964/draw-scaled-rectangles-on-scaled-image-canvas

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!