Question

我正在尝试使用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);


})

Answer 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，带有鼠标操作

paperjs-用箭头画一条线

1 个答案: