知识介绍
- 对SVG元素实现拖拽视图的功能
代码分析
- 对于SVG元素的viewBox属性(x, y, w, h),我们设置x,y作为信号量
const [boxLocation, setboxLocation] = createSignal({ x: 0, y: 0 });
- 添加拖拽所需的变量和事件
let isDragging = false;
let startX: number;
let startY: number;
// 鼠标按下事件处理
const handleMouseDown = (event) => {
isDragging = true;
startX = event.clientX + boxLocation().x;
startY = event.clientY + boxLocation().y;
event.currentTarget.style.cursor = 'grabbing';
};
// 鼠标拖动事件处理
const handleMouseMoveDrag = (event) => {
if (isDragging) {
setboxLocation({
x: -event.clientX + startX,
y: -event.clientY + startY
});
}
};
// 鼠标松开事件处理
const handleMouseUp = (event) => {
isDragging = false;
event.currentTarget.style.cursor = 'grab';
};
这里有一个关键逻辑:
设鼠标按下时当前光标坐标为start,拖动时当前光标坐标为end。
则handleMouseDown时startX = start.x+boxLocation().x;startY = start.y+boxLocation().y。
在handleMouseMoveDrag时,实时设置boxLocation.x为-end.x+startX,boxLocation.y为-end.y+startY,即
实时设置boxLocation.x = -end.x + start.x+boxLocation().x = (拖拽后位置的x坐标 - 初始位置的x坐标) + boxLocation()的x坐标;
实时设置boxLocation.y = -end.y + start.y+boxLocation().y = (拖拽后位置的y坐标 - 初始位置的y坐标) + boxLocation()的y坐标;
当前拖拽方向和SVG内元素移动方向相同
3. 组件挂载
// 组件挂载和卸载时的事件处理
createEffect(() => {
const svgElement = document.querySelector('.match-svg');
svgElement.addEventListener('mousedown', handleMouseDown);
svgElement.addEventListener('mousemove', handleMouseMoveDrag);
svgElement.addEventListener('mouseup', handleMouseUp);
onCleanup(() => {
svgElement.addEventListener('mousedown', handleMouseDown);
svgElement.addEventListener('mousemove', handleMouseMoveDrag);
svgElement.addEventListener('mouseup', handleMouseUp);
});
});
标签:12,const,svgElement,知识,boxLocation,SolidJS,坐标,addEventListener,event
From: https://www.cnblogs.com/Frey-Li/p/18409948