Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
838 views
in Technique[技术] by (71.8m points)

canvas 坐标转换问题

遇到一个移动端画板的需求,需要在给定的图片上进行标注,原图需要放大后进行标注,我先用了css transform:scale 放大画布,然后进行标注,这样会造成坐标出问题。
我目前的获取坐标方法,不进行缩放时,这样倒没问题,画布放大后,准确坐标应该如何计算?

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

image.png

本质是计算缩放后图片的原点坐标与缩放后的宽高


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...