我有一个项目:单击鼠标并移动,然后单击下一步,依此类推;通过每次单击的位置,我想制作一个svg多边形,但是我不知道该怎么做。
当鼠标移动时,多边形的最后一个点同时出现在鼠标指针上,当我单击并移动时,单击的位置会得到一个顶点,依此类推。
答案 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>