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

时间:2019-01-14 06:29:56

标签: javascript svg

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

when mouse move same time polygon's last point appearing at mouse pointer and when I click and move, the clicked position get a vertices point and so on

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

1 个答案:

答案 0 :(得分:0)

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

<!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>