js 将画布原点改到中间 00的位置缩放的时候里面的元素移动右下角怎么计算
将画布原点改到中间的位置可以通过以下代码实现:
ctx.translate(canvas.width/2, canvas.height/2);
这样,画布的原点就被移动到了中间位置。
当进行缩放操作时,里面的元素会相对于画布原点进行缩放。如果要让元素保持在原来的位置不变,可以先将画布原点移动到元素的中心点,缩放后再将画布原点移回来。例如,如果要将元素的中心点移动到画布的中心位置,可以先计算出元素的中心点坐标,然后将画布原点移动到该坐标:
const centerX = canvas.width/2 - element.width/2;
const centerY = canvas.height/2 - element.height/2;
ctx.translate(centerX, centerY);
缩放后,再将画布原点移回来:
ctx.translate(-centerX, -centerY);
这样,元素就能在缩放时保持在原来的位置不变了。
原文地址: https://www.cveoy.top/t/topic/f4nx 著作权归作者所有。请勿转载和采集!