元素出现偏移
scale
后白色的div缩放后没有位于左上角了
设置:transform-origin
transform-origin: 0 0;
鼠标事件发生了偏移
在本次应用中,需要通过拖动几个点更改元素的宽高位置、缩放后按照之前的逻辑会出现鼠标和我们改边的元素的边界不同步了
解决:
在添加偏移量的时候乘以1/scale
代码:
//拖拽整个shape
const handleMouseDownOnShape = (e: React.MouseEvent<HTMLDivElement>) => {
e.stopPropagation();
e.preventDefault();
const pos = { ...props.current.style }
const startY = e.clientY;
const startX = e.clientX;
// 如果直接修改属性,值的类型会变为字符串,所以要转为数值型
const startTop = Number(pos.top);
const startLeft = Number(pos.left);
let hasMove: boolean = false
const move = (moveEvent: any): void => {
hasMove = true;
const scale: number = 1 / props.scale //乘以缩放的比例倒数,否则鼠标事件出现偏移
const curX = moveEvent.clientX;
const curY = moveEvent.clientY;
pos.top = (curY - startY) * scale + startTop;
pos.left = (curX - startX) * scale + startLeft;
//更改位置
const current = { ...props.current, style: { ...pos } }
props.changeList(current)
};
const up = () => {
hasMove = false;
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", up);
};
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", up);
}