Question

我有一个项目：单击鼠标并移动，然后单击下一步，依此类推；通过每次单击的位置，我想制作一个svg多边形，但是我不知道该怎么做。

当鼠标移动时，多边形的最后一个点同时出现在鼠标指针上，当我单击并移动时，单击的位置会得到一个顶点，依此类推。

Answer 1

这是您想要的代码示例。多边形需要关闭，您应该使用折线

<!doctype html>

  <body>
  <svg id="svg" height="1000px" width="1000px">
  <polyline id="polyline" style="fill:white;stroke:black;stroke-width:1"/>
  </svg>
  </body>
  <script>
    const polyline = document.querySelector('#polyline');
    const svg = document.querySelector('#svg');
    svg.addEventListener('click',(e) =>{
        let pts = polyline.getAttribute('points') || '';
        const newPoint = `${e.clientX},${e.clientY} `;
        pts += newPoint;
        polyline.setAttribute('points',pts); 
    })

    </script>
</html>

更新：对于mousemove功能，请添加此代码

<!doctype html>

  <body>
  <svg id="svg" height="100%" width="100%">
  <polyline id="polyline" style="fill:white;stroke:black;stroke-width:1"/>
  <line id="templine" style="fill:white;stroke:black;stroke-width:1" />
  </svg>
  </body>
  <script>
    let lastPt;
    const polyline = document.querySelector('#polyline');
    const svg = document.querySelector('#svg');
    const templine = document.querySelector('#templine');
    svg.addEventListener('click',(e) =>{
        let pts = polyline.getAttribute('points') || '';
        const newPoint = `${e.clientX},${e.clientY} `;
        pts += newPoint;
        polyline.setAttribute('points',pts); 
        lastPt = [e.clientX,e.clientY]
    })

    svg.addEventListener('mousemove',(e) =>{
        templine.setAttribute('x1',lastPt[0]);
        templine.setAttribute('y1',lastPt[1]);
        templine.setAttribute('x2',e.clientX);
        templine.setAttribute('y2',e.clientY);
    })

    </script>
</html>

如何在鼠标点击位置的点上绘制svg多边形

1 个答案: