谁能帮我把这个 paperscript 转换成 javascript？

Question

我有这篇来自 paper.js 的论文，我希望它能在 javascript 中进行转换，但我无法让鼠标拖动起作用。

PaperScript 在声明为全局函数时识别几个特殊的事件处理程序，而在 JavaScript 中，这些需要手动安装在适当的对象上。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">

var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
  path.strokeColor = 'black';
  path.strokeWidth = 2;
path.selected = true;
  path.closed = true;


var hitOptions = {
    segments: true,
    stroke: true,
    fill: true,
    tolerance: 8
};



var segment, path;
var movePath = false;
function onMouseDown(event) {
    segment = path = null;
    var hitResult = project.hitTest(event.point, hitOptions);
    if (!hitResult)
        return;

    if (event.modifiers.shift) {
        if (hitResult.type == 'segment') {
            hitResult.segment.remove();
        };
        return;
    }

    if (hitResult) {
        path = hitResult.item;
        if (hitResult.type == 'segment') {
            segment = hitResult.segment;
        } else if (hitResult.type == 'stroke') {
            var location = hitResult.location;
            segment = path.insert(location.index + 1, event.point);
            //path.smooth();
        }
    }
    movePath = hitResult.type == 'fill';
    if (movePath)
        project.activeLayer.addChild(hitResult.item);
}

function onMouseMove(event) {
    project.activeLayer.selected = false;
    if (event.item)
        event.item.selected = true;
}

function onMouseDrag(event) {
    if (segment) {
        segment.point += event.delta;
        //path.smooth();
    } else if (path) {
        path.position += event.delta;
    }
}


</script>
<canvas id="myCanvas" resize></canvas>

提前致谢！

Answer 1

PaperScript 和 JavaScript 上下文之间的差异详述 here。
为了尽可能减少对代码的更改，您必须：

Install Paper.js 在全局范围内。这允许您像 Path、Point、...一样直接使用类（无需通过全局 paper 对象）。
Setup Paper.js 使用你的 canvas。这相当于设置 PaperScript canvas 属性。
创建一个 Tool 实例，您将使用它来注册您的事件处理程序。
在操作点时使用数学运算符函数（如Point.add()）而不是运算符（如+）。

这是您在 JavaScript 上下文中工作的代码。

// expose paperjs classes into global scope
paper.install(window);

// bind paper to the canvas
paper.setup('canvas');

var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
path.strokeColor = 'black';
path.strokeWidth = 2;
path.selected = true;
path.closed = true;


var hitOptions = {
  segments: true,
  stroke: true,
  fill: true,
  tolerance: 8
};


var segment, path;
var movePath = false;

// create a custom tool
var customTool = new Tool();

// attach handlers to the tool
customTool.onMouseDown = function(event) {
  segment = path = null;
  var hitResult = project.hitTest(event.point, hitOptions);
  if (!hitResult) {
    return;
  }

  if (event.modifiers.shift) {
    if (hitResult.type == 'segment') {
      hitResult.segment.remove();
    }
    return;
  }

  if (hitResult) {
    path = hitResult.item;
    if (hitResult.type == 'segment') {
      segment = hitResult.segment;
    } else if (hitResult.type == 'stroke') {
      var location = hitResult.location;
      segment = path.insert(location.index + 1, event.point);
      //path.smooth();
    }
  }
  movePath = hitResult.type == 'fill';
  if (movePath) {
    project.activeLayer.addChild(hitResult.item);
  }
};
customTool.onMouseMove = function(event) {
  project.activeLayer.selected = false;
  if (event.item) {
    event.item.selected = true;
  }
};
customTool.onMouseDrag = function(event) {
  if (segment) {
    // use methods instead of operators
    segment.point = segment.point.add(event.delta);
    //path.smooth();
  } else if (path) {
    path.position = path.position.add(event.delta);
  }
};

html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
}

canvas[resize] {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
<canvas id="canvas" resize></canvas>

谁能帮我把这个 paperscript 转换成 javascript？

Can anyone help me convert this paperscript to javascript?

javascript

paperjs