繪製一個扇形的矩形

Question

我想在下面的圖片來繪製鼠標一個扇形的矩形狀

我能夠用代碼繪製矩形下方

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));

Answer 1

像這樣的事情？

我正在使用弧來製作扇貝。你可能想調整扇貝的計算方式以獲得更好的角落。但我會把它留給你。

var scallopSize = 30; 
 

 
function Rectangle(start, end) { 
 
    var minX = Math.min(start.x, end.x); 
 
    var minY = Math.min(start.y, end.y); 
 
    var w = Math.abs(end.x - start.x); 
 
    var h = Math.abs(end.y - start.y); 
 

 
    // Calculate scallop sizes 
 
    var numW = Math.round(w/scallopSize); 
 
    if (numW === 0) numW = 1; 
 
    var numH = Math.round(h/scallopSize); 
 
    if (numH === 0) numH = 1; 
 
    var stepW = w/numW; 
 
    var stepH = h/numH; 
 

 
    // top 
 
    var p = minX + stepW/2; // start each size at half a scallop along 
 
    var path = ["M", p, minY]; 
 
    for (var i=1; i < numW; i++) { // numW-1 scallops per side 
 
    p += stepW; 
 
    path.push('A'); 
 
    path.push(stepW/2 + 1); // Add 1 to the radius to ensure it's 
 
    path.push(stepW/2 + 1); // big enough to span the stepW 
 
    path.push("0 0 1"); 
 
    path.push(p); 
 
    path.push(minY); 
 
    } 
 
    // top right 
 
    var p = minY + stepH/2; 
 
    path.push('A'); 
 
    path.push(stepH/2.8); // 2 * sqrt(2) 
 
    path.push(stepH/2.8); // corners are a little smaller than the scallops 
 
    path.push("0 0 1"); 
 
    path.push(minX + w); 
 
    path.push(p); 
 
    // right 
 
    for (var i=1; i < numH; i++) { 
 
    p += stepH; 
 
    path.push('A'); 
 
    path.push(stepH/2 + 1); 
 
    path.push(stepH/2 + 1); 
 
    path.push("0 0 1"); 
 
    path.push(minX + w); 
 
    path.push(p); 
 
    } 
 
    // bottom right 
 
    var p = minX + w - stepW/2; 
 
    path.push('A'); 
 
    path.push(stepH/2.8); 
 
    path.push(stepH/2.8); 
 
    path.push("0 0 1"); 
 
    path.push(p); 
 
    path.push(minY + h); 
 
    // bottom 
 
    for (var i=1; i < numW; i++) { 
 
    p -= stepW; 
 
    path.push('A'); 
 
    path.push(stepW/2 + 1); 
 
    path.push(stepW/2 + 1); 
 
    path.push("0 0 1"); 
 
    path.push(p); 
 
    path.push(minY + h); 
 
    } 
 
    // bottom left 
 
    var p = minY + h - stepH/2; 
 
    path.push('A'); 
 
    path.push(stepH/2.8); 
 
    path.push(stepH/2.8); 
 
    path.push("0 0 1"); 
 
    path.push(minX); 
 
    path.push(p); 
 
    // left 
 
    for (var i=1; i < numH; i++) { 
 
    p -= stepH; 
 
    path.push('A'); 
 
    path.push(stepH/2 + 1); 
 
    path.push(stepH/2 + 1); 
 
    path.push("0 0 1"); 
 
    path.push(minX); 
 
    path.push(p); 
 
    } 
 
    // top left 
 
    path.push('A'); 
 
    path.push(stepH/2.8); 
 
    path.push(stepH/2.8); 
 
    path.push("0 0 1"); 
 
    path.push(minX + stepW/2); 
 
    path.push(minY); 
 
    path.push('Z'); 
 

 
    return path.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>