paperjs - 用箭头画一条线答案

【问题标题】：paperjs - draw a line with arrowspaperjs - 用箭头画一条线
【发布时间】：2018-06-25 19:16:27
【问题描述】：

我正在尝试使用 paperjs 画一条带箭头的线，但它不会产生所需的输出。

$(document).ready(function(){

    paper.install(window)
    paper.setup('myCanvas')



   x1 = 100;
   y1 = 100;
   r =  100;
   theta = .7;
   var path = new Path();
   path.strokeColor = 'black';
   var start = new Point(100, 100);
   path.moveTo(start);
   path.lineTo(x1+r*Math.cos(theta), y1+r*Math.sin(theta));

   path.simplify(300)
   var vector = path.getPointAt(path.length).subtract(path.getPointAt(path.length-25))
   var arrowVector = vector.normalize(18);
   var path2 = new Path({
      segments: [path.getPointAt(path.length) + arrowVector.rotate(145), path.getPointAt(path.length), path.getPointAt(path.length) + arrowVector.rotate(-145)],
      fillColor: 'black',
      strokeWidth: 6,
   });
   path2.scale(1.3);


})

【问题讨论】：

附带说明，在您的 JSFiddle 中，JS cmets 在一行 JavaScript 的开头使用 //，而不是

标签： paperjs

【解决方案1】：

下面是一些创建箭头的代码。该对象用鼠标向下点初始化，并在鼠标拖动到的点处绘制一个箭头。

function Arrow (mouseDownPoint) {
    this.start = mouseDownPoint;
    this.headLength = 20;
    this.tailLength = 9;
    this.headAngle = 35;
    this.tailAngle = 110
}

Arrow.prototype.draw = function (point) {
    var end = point;
    var arrowVec = this.start.subtract(end);

    // parameterize {headLength: 20, tailLength: 6, headAngle: 35, tailAngle: 110}
    // construct the arrow
    var arrowHead = arrowVec.normalize(this.headLength);
    var arrowTail = arrowHead.normalize(this.tailLength);

    var p3 = end;                  // arrow point

    var p2 = end.add(arrowHead.rotate(-this.headAngle));   // leading arrow edge angle
    var p4 = end.add(arrowHead.rotate(this.headAngle));    // ditto, other side

    var p1 = p2.add(arrowTail.rotate(this.tailAngle));     // trailing arrow edge angle
    var p5 = p4.add(arrowTail.rotate(-this.tailAngle));    // ditto

    // specify all but the last segment, closed does that
    this.path = new paper.Path(this.start, p1, p2, p3, p4, p5);
    this.path.closed = true;

    this.path.strokeWidth = 1
    this.path.strokColor = 'black'
    this.path.fillColor = 'black'

    return this.path
}

我喜欢锥形尾巴，但你可以通过调整构造函数的长度来摆脱它。

这是一个sketch 鼠标处理

【讨论】：