知识介绍
- 对指定SVG元素实现滚轮zoom
代码分析
1. 对指定SVG元素实现滚轮zoom
- 设置viewBox属性{x,y,w,h}以及缩放系数scale为信号量
const [scale, setScale] = createSignal(1); // 初始缩放比例
const [boxLocation, setboxLocation] = createSignal({ x: 0, y: 0 });
const [boxSize, setboxSize] = createSignal({ w: 1000, h: 1000 });
- 读取点坐标数据后,设置SVG元素初始的viewBox属性
onMount(async () => {
try {
const response = await fetch('./src/assets/dataset/matched_points_info.json');
if (!response.ok) {
throw new Error(`HTTP 错误!状态码:${response.status}`);
}
const jsonData: MatchData = await response.json();
setData(jsonData);
getViewBox();
} catch (error) {
console.error("加载数据时出错:", error);
}
});
const getViewBox = () => {
const allX = xpoints().map(point => point.coords[0]);
const allY = xpoints().map(point => point.coords[1]);
const minX = Math.min(...allX)-10;
const maxX = Math.max(...allX)+10;
const minY = Math.min(...allY)-10;
const maxY = Math.max(...allY)+10;
setboxLocation({ x: minX, y: minY });
setboxSize({ w: maxX - minX, h: maxY - minY });
};
- 设置滚轮事件,并进行事件处理
const handleWheel = (event: WheelEvent) => {
event.preventDefault();
const newScale = scale() + (event.deltaY > 0 ? -0.1 : 0.1);
setScale(newScale);
};
// 组件挂载和卸载时的事件处理
createEffect(() => {
const svgElement = document.querySelector('.match-svg');
svgElement.addEventListener('wheel', handleWheel);
onCleanup(() => {
svgElement.removeEventListener('wheel', handleWheel);
});
});
- 在return的对应SVG元素中设置viewBox的参数
return (
<svg class="match-svg"
viewBox={`${boxLocation().x} ${boxLocation().y} ${boxSize().w / scale()} ${boxSize().h / scale()}`} >
<g>
......
</g>
</svg>
);
标签:11,...,const,point,SVG,知识,SolidJS,Math,10
From: https://www.cnblogs.com/Frey-Li/p/18408456