我想在下面的图片来绘制鼠标一个扇形的矩形状绘制一个扇形的矩形
我能够用代码绘制矩形下方
function Rectangle(start, end) {
var w = (end.x - start.x);
var h = (end.y - start.y);
return ["M", start.x, start.y, "L", (start.x + w), start.y, "L", start.x + w, start.y + h, "L", start.x, start.y + h, "L", start.x, start.y].join(' ');
}
var point;
document.addEventListener('mousedown', function(event) {
point = {
x: event.clientX,
y: event.clientY
}
});
document.addEventListener('mousemove', function(event) {
var target = {
x: event.clientX,
y: event.clientY
}
if(point) {
var str = Rectangle(point, target);
document.getElementById('test').setAttribute('d', str);
}
});
document.addEventListener('mouseup', function(event) {
point = null;
});
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
svg {
height:100%;
width: 100%
}
<svg>
<path id="test" style="stroke-width: 4; stroke: RGBA(212, 50, 105, 1.00); fill: none" />
</svg>
但是,当我尝试转换成扇形矩形我看到不同的模式完全匹配Infinite Monkey Theorm
我试过的方法是,在虚拟元素上绘制一个矩形路径。将每个点乘以15直到总长度。然后在这些点之间绘制弧线。它不工作。另外,我想避免使用getPointAtLength
,因为它的移动支持不是很好。
var pathEle = document.createElementNS('http://www.w3.org/2000/svg', 'path');
pathEle.setAttribute('d', rectangle(point, target));
window.pathEle = pathEle;
var points = [];
for (var i = 0; i < pathEle.getTotalLength(); i += 15) {
points.push(pathEle.getPointAtLength(i));
}
document.getElementById('test1').setAttribute('d', toSVGPath(points));
会发生什么,如果矩形的边的长度不是15的倍数?应该如何处理这个小的剩余长度? –
@PaulLeBeau它不会是对称的。附图中的第一个框就是我想要实现的一个完美例子。角落应该成为弧形。所以数字15是随机抽取的,我认为它应该是计算值 – Exception