Question

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

此代码不起作用;

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

Answer 1

您的问题是由脚本标记中包含脚本的方式引起的。由于我不明白的原因，对于某些数学运算（例如点加法和减法），paper.js需要有<script type="text/paperscript">标签而不是常规text/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>

或者，如果您想在脚本标记中使用text/javascript，则可以使用paperjses .add，.subtract，...函数进行数学运算。

PaperJS并在添加多个工具时在一行末尾绘制一个箭头

1 个答案: