问题描述
我想做
- 客户画线
- 按客户行分割 svg 区域
- 当鼠标悬停切片区域时,更改背景颜色
我已经做了 1.. 但不能做 2 (并在谷歌上搜索了这个......但我找不到合适的答案。)
如何将多边形分割成多条线? 如果你能帮助我,我会很高兴。
<div id="wrap">
<svg id="svg" width="300" height="300"></svg>
</div>
<script>
/*off contexmenu*/
if (document.addEventListener) { // IE >= 9; other browsers
document.addEventListener('contextmenu',function(e) {
e.preventDefault();
},false);
} else { // IE < 9
document.attachEvent('oncontextmenu',function() {
window.event.returnValue = false;
});
}
var svg = document.getElementById("svg");
let painting = false;
let startX=0,startY=0;
function startPainting(e){
var x = e.clientX-svg.getBoundingClientRect().left;
var y = e.clientY-svg.getBoundingClientRect().top;
startX = x;
startY = y;
painting = true;
/*add line*/
var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
newLine.setAttribute('class','line');
newLine.setAttribute('x1',x);
newLine.setAttribute('y1',y);
newLine.setAttribute('x2',x);
newLine.setAttribute('y2',y);
newLine.setAttribute("stroke","black");
newLine.setAttribute("fill","black");
newLine.setAttribute("stroke-width","3px");
newLine.addEventListener('mouSEOver',function(e){
if(!painting)
e.target.setAttribute("stroke","green");
});
newLine.addEventListener('mouseleave',function(e){
e.target.setAttribute("stroke","black");
});
newLine.addEventListener('contextmenu',function(e){
if(!painting)
svg.removeChild(e.target);
});
svg.append(newLine);
}
function stopPainting(e){
if(painting){
painting = false;
var i = svg.children.length;
svg.removeChild(svg.children.item(i-1));
}
}
function onMouseMove(e){
var x = e.clientX-svg.getBoundingClientRect().left;
var y = e.clientY-svg.getBoundingClientRect().top;
if(painting){
svg.children.item(svg.children.length-1).setAttribute('x2',x);
svg.children.item(svg.children.length-1).setAttribute('y2',y);
}
}
svg.addEventListener('mousemove',onMouseMove);
svg.addEventListener('mouseleave',stopPainting);
svg.addEventListener('contextmenu',stopPainting);
svg.addEventListener('click',startPainting);
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)