DWQA QuestionsCategory: ProgramThe problem of coordinate transformation in canvas
zk785 asked 2 months ago

Encountered a mobile terminal Sketchpad needs to be marked on the given image, the original image needs to be enlarged and then marked, I used CSS firsttransform:scaleZoom in on the canvas, and then annotate, which will cause problems with the coordinates.
In my current method of obtaining coordinates, it’s ok if I don’t zoom. How to calculate the accurate coordinates after the canvas is enlarged?

function getPosition (e) {
    e.preventDefault();
    var touch = e.touches[0];
    var x = touch.pageX;
    var y = touch.pageY;
    return {x, y}
}
luozz replied 2 months ago

The calculation is made by using the proportional relationship

1 Answers
hold_baby answered 2 months ago

image.pngIts essence is to calculate the origin coordinates and the width and height of the zoomed image