Javascript 添加多个工具时，在行尾绘制箭头

我试图在画布上创建一些工具。在我想要创建的工具中，有一条在末尾带有箭头的线。我能够让代码自己工作，但当我尝试添加其他工具时，它不会绘制箭头，它只会绘制一条线。我不确定我的代码中缺少了什么来让它工作。任何帮助都将不胜感激，也许有更好的方法，我愿意接受建议

这个代码不起作用

paper.install(window);
var forward;   
window.onload = function() {
  paper.setup('sketx-canvas');
   forward = new Tool();
    var pathforward;
    forward.onMouseDown = function(event) {
        // Create a new path and set its stroke color to black:
        pathforward = new Path({
            segments: [event.point],
            strokeColor: 'red',
            strokeWidth: 4,              
        });                            
    }

    // While the user drags the mouse, points are added to the path
    // at the position of the mouse:
    forward.onMouseDrag = function(event) {
        pathforward.add(event.point);
    }     

    // When the mouse is released, we simplify the path and add arrow:
    forward.onMouseUp = function(event) {
        pathforward.simplify(300);     
        var vector  = pathforward.getPointAt(pathforward.length) - pathforward.getPointAt(pathforward.length-25); 
        var arrowVector = vector.normalize(18);
        var path2 = new Path({
          segments: [pathforward.getPointAt(pathforward.length) + arrowVector.rotate(145), pathforward.getPointAt(pathforward.length), pathforward.getPointAt(pathforward.length) + arrowVector.rotate(-145)],
          fillColor: 'black',
          strokeWidth: 6,              
        }); 
        path2.scale(1.3);                                     
    }        

}

这个代码确实有效

    var path;
    function onMouseDown(event) {
        // Create a new path and set its stroke color to black:
        path = new Path({
            segments: [event.point],
            strokeColor: 'red',
            strokeWidth: 4,
            // if we want dashed lines use dashArray: [2, 4],                
        });                            
    }

    // While the user drags the mouse, points are added to the path
    // at the position of the mouse:
    function onMouseDrag(event) {
        path.add(event.point);
    }     

    // When the mouse is released, we simplify the path and add arrow:
    function onMouseUp(event) {
        path.simplify(300);   ;    
        var vector  = path.getPointAt(path.length) - 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);                                     
    }

让它工作，这里是最后的代码

<script type="text/javascript">
paper.install(window);
var forward;



window.onload = function() {
  paper.setup('sketx-canvas');
   forward = new Tool();
    var pathforward;
    forward.onMouseDown = function(event) {
        // Create a new path and set its stroke color to black:
        pathforward = new Path({
            segments: [event.point],
            strokeColor: 'red',
            strokeWidth: 4,
            // if we want dashed lines use dashArray: [2, 4],                
        });                            
    }

    // While the user drags the mouse, points are added to the path
    // at the position of the mouse:
    forward.onMouseDrag = function(event) {
        pathforward.add(event.point);
    }     

    // When the mouse is released, we simplify the path and add arrow:
    forward.onMouseUp = function(event) {
        pathforward.simplify(300); 
        var point = pathforward.getPointAt(pathforward.length)
        var vector  = point.subtract(pathforward.getPointAt(pathforward.length-25)); 
        console.log(vector);
        var arrowVector = vector.normalize(18);
        var path2 = new Path({
          segments: [point.add(arrowVector.rotate(145)), point, point.add(arrowVector.rotate(-145))],
          fillColor: 'black',
          strokeWidth: 6,              
        }); 
        path2.scale(1.3);                                     
    }  

纸张。安装（窗口）；
var远期；
window.onload=函数（）{
纸张。设置（“sketx-CANNAS”）；
前进=新工具（）；
var向前；
forward.onMouseDown=函数（事件）{
//创建新路径并将其笔划颜色设置为黑色：
pathforward=新路径({
段：[事件点]，
strokeColor:'红色'，
冲程宽度：4，
//如果需要虚线，请使用dashArray:[2,4]，
});                            
}
//当用户拖动鼠标时，会将点添加到路径中
//在鼠标的位置：
forward.onMouseDrag=函数（事件）{
添加（事件点）；
}     
//释放鼠标后，我们将简化路径并添加箭头：
forward.onMouseUp=函数（事件）{
简化（300）；
var point=pathforward.getPointAt（pathforward.length）
var vector=point.subtract（pathforward.getPointAt（pathforward.length-25））；
console.log（向量）；
var arrowVector=向量。规格化（18）；
var path2=新路径({
分段：[点.add（箭头向量.rotate（145）），点，点.add（箭头向量.rotate（-145））]，
fillColor:'黑色'，
冲程宽度：6，
}); 
路径2.比例（1.3）；
}  

您的问题是由于在脚本标记中包含脚本的方式造成的。出于我不理解的原因，对于某些数学运算（如加减点），paper.js需要有一个

标记，而不是常规的

文本/javascript

要在错误代码中显示它，如果您更改为

paperscript

，它会工作

<canvas id="sketx-canvas" width="600" height="319"></canvas>
<br>

<a href="#" onclick="forward.activate();">Forward</a>
<script type="text/paperscript">
    paper.install(window);
    var forward;



    window.onload = function() {

        ...

    }
</script>

纸张。安装（窗口）；
var远期；
window.onload=函数（）{
...
}

---

或者，如果您想在脚本标记中使用

text/javascript

，您可以使用paperjses.add、.subtract、…函数进行数学运算。

您可以用代码创建一个JSFIDLE，这样我们就可以测试它了吗？糟糕的代码；很好的代码；非常感谢，我最终使用了add and subtract函数，它工作得非常好。我试过文本/纸质脚本，但没能成功。