Question

我有来自paper.js的paperscript，我希望将其转换为javascript，但是我无法拖动鼠标来工作。

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

class TestUserCanAskQuestion(TestCase):
    @classmethod
    def setUpTestData(cls):
        call_command('insert_initial_data')

    def setUp(self):
        self.contact = ContactFactory()

提前谢谢！

Answer 1

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

Install Paper.js在全局范围内。这样一来，您就可以直接使用Path，Point，...之类的类（而无需通过全局paper槽对象）。
Setup Paper.js使用您的画布。这等效于设置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>

谁能帮我将此论文转换为javascript吗？

1 个答案: