SolidJS-每日小知识(9/11)

知识介绍

1. 对指定SVG元素实现滚轮zoom

代码分析

1. 对指定SVG元素实现滚轮zoom

1. 设置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 }); 

2. 读取点坐标数据后，设置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 });
  };

3. 设置滚轮事件，并进行事件处理

  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);
    });
  });

4. 在return的对应SVG元素中设置viewBox的参数

  return (
    <svg class="match-svg"
         viewBox={`${boxLocation().x} ${boxLocation().y} ${boxSize().w / scale()} ${boxSize().h / scale()}`} >
      <g>
        ......
      </g>
    </svg>
  );