paperjs 使用鼠標事件繪制 0 到 360º 弧

Question

我正在嘗試使用帶有 paper.js 的鼠標事件繪制弧線

用戶必須能夠繪制從 0 度到 360 度的圓弧。 我面臨的問題是我可以繪制 270 度弧，但超過 270 度，弧會翻轉到另一個象限。

起點必須位於任何位置

可以在這里找到草圖：

http://sketch.paperjs.org/#V/0.12.7/S/nVTBjpswEP2VEZeQXYcG2l6IOFTpZQ+RVruHHkpVeR1nQSE2MoZNFPHvtbHdeCGtorWEsOf5zTyex5wDhg80SIPnPZWkCFBA+FavOywAC/KbNHSVs5zptcDbsm2yZLlcmQChTFKRMfoGj7xkMvyyXCL1zC3eSCzkCP5qYJeTxJDBsAPLIlqXglQ0POcM1DDpU/tGJmhEpJDY9a6sqjWvuNo3e6kw2c9y1s9XoAvYD/AquNR6NFLwPXVcQbczNAZ/lFtZpBBPgDWuNYe3TLEADKzLAgyV4TJyJjmvIs42vG3ohndaz65lRJachbRTHzeHsyNpT2rPsgGPaj2PjshfnbSNjtLF2WD2wnjlI0lWT6OYvVY0C7skGmYP7EnZilmz6OJRxFXxuIJ0uMq0ueun7+GEgSZZ0bBE9hzNCb7Pa08qEvSgDAodaMNeh3wTJDQC9J5e2+a8BKcIV3WBYzS8kqu1TRfYhqKyFQy8xtgJfkj9gB5H14fREe5tF95ttCTCG1tyjt5zTn85pxGnKZnjXCi9R5eFaq7X4iYZcAcjIQoys2Rhq3xKbhHnMl3kXc30D8n8Q6bdj/J/xMRJjusKb7/xn/974+11t03Um7+Z+ne +CIr3w+1sgvTnr/4P

這是實現的代碼：

var arc_cse;

var radius=200;
var center=new Point(400,400);
var start=new Point(400,500);


var c1 = new Path.Circle({
    center: center,
    radius: 2,
    fillColor: 'black'
}); 

arc_cse = new Path({
        strokeColor: 'red',
        strokeWidth: 1,
        strokeCap: 'round',  
    });    

           
tool.onMouseMove = function(event) {

    var p=new Point(event.point.x,event.point.y);
    var v1=start-center;
    var v2=p-center;
    var angle=(v2.angleInRadians-v1.angleInRadians);
    
    var arcval=arc_CRD(v1.angleInRadians,v2.angleInRadians,angle,center,radius);
    
    arc_cse.remove();
    arc_cse= new Path.Arc(arcval);
}

function arc_CRD(alpha1,alpha2,angle,center,radius){
   
    return {
        from: {
            x: center.x + radius*Math.cos(alpha1),
            y: center.y + radius*Math.sin(alpha1)
        },
        through: {
            x: center.x + radius * Math.cos(alpha1 + (alpha2-alpha1)/2),
            y: center.y + radius * Math.sin(alpha1 + (alpha2-alpha1)/2)
        },
        to: {
            x: center.x + radius*Math.cos(alpha1+(alpha2-alpha1)),
            y: center.y + radius*Math.sin(alpha1+(alpha2-alpha1))
        },
        strokeColor: 'red',
        strokeWidth: 3,
        strokeCap: 'round'
    }
   
}

提前致謝

Answer 1

當然有很多方法可以做到這一點，但我會這樣做： 草圖。
這應該可以幫助您找到適合您自己用例的解決方案。

function dot(point, color) {
    const item = new Path.Circle({ center: point, radius: 5, fillColor: color });
    item.removeOnMove();
}

function drawArc(from, center, mousePoint) {
    const radius = (from - center).length;
    const circle = new Path.Circle(center, radius);
    const to = circle.getNearestPoint(mousePoint);
    const middle = (from + to) / 2;

    const throughVector = (middle - center).normalize(radius);
    const angle = (from - center).getDirectedAngle(to - center);
    const through = angle <= 0
        ? center + throughVector
        : center - throughVector;

    const arc = new Path.Arc({
        from,
        through,
        to,
        strokeColor: 'red',
        strokeWidth: 2
    });

    circle.removeOnMove();
    arc.removeOnMove();

    // Visual helpers
    dot(from, 'orange');
    dot(center, 'black');
    dot(mousePoint, 'red');
    dot(to, 'blue');
    dot(middle, 'lime');
    dot(through, 'purple');
    circle.strokeColor = 'black';

    return arc;
}

function onMouseMove(event) {
    drawArc(view.center + 100, view.center, event.point);
}

---

編輯

在回答您的評論時，這是一種更數學的方法： 草圖。
這是基於您的代碼並且具有完全相同的行為，因此您應該沒有困難使用它。
這兩種實現的關鍵是Point.getDirectedAngle()方法，它允許您根據通過點側調整行為。

const center = new Point(400, 400);
const start = new Point(400, 500);

const c1 = new Path.Circle({
    center: center,
    radius: 2,
    fillColor: 'black'
});

let arc;

function getArcPoint(from, center, angle) {
    return center + (from - center).rotate(angle);
}

function drawArc(from, center, mousePoint) {
    const directedAngle = (from - center).getDirectedAngle(mousePoint - center);
    const counterClockwiseAngle = directedAngle < 0
        ? directedAngle
        : directedAngle - 360;

    const through = getArcPoint(from, center, counterClockwiseAngle / 2);
    const to = getArcPoint(from, center, counterClockwiseAngle);

    return new Path.Arc({
        from,
        through,
        to,
        strokeColor: 'red',
        strokeWidth: 1,
        strokeCap: 'round'
    });
}

function onMouseMove(event) {
    if (arc) {
        arc.remove();
    }
    arc = drawArc(start, center, event.point);
}