Question

我有一个画布，试图在paperjs中设置onmousedrag和onmouseup事件。

当我尝试在画布对象上绘制某些东西时，事件永远不会触发。

<!-- templates/index.html -->
<html>
  <head>
    <title>Annotation Tool</title>

    <!-- CSS Files -->
    <link rel="stylesheet" href="/static/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/style.css">

    <!-- Paper files -->
    <script src="/static/node_modules/paper/dist/paper-full.min.js" charset="utf-8"></script>
    <!--<script type="text/paperscript" src="/static/js/paperscript.js" charset="utf-8" canvas="myCanvas"></script>-->

      <!-- Javascript files -->
    <script src="/static/node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
    <script src="/static/node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
    <script src="/static/js/scripts.js" charset="utf-8"></script>




  </head>
  <body>
  <script>

  </script>
  <div class="container">

      <div class="row row-bordered">
          <div class="btn-toolbar">
              <button type="button" class="btn btn-primary" id="draw-line">Line</button>
              <button type="button" class="btn btn-primary" id="draw-rect">Rectangle</button>
              <button type="button" class="btn btn-primary" id="draw-poly">Polygon</button>
          </div>
      </div>

      <canvas id="myCanvas"></canvas>
      <!--<div class="row">-->
         <!--<img src="/static/images/lena.png" alt="Italian Trulli">-->
      <!--</div>-->

  </div>


  </body>
</html>

// scripts.js

var globals = {}



$(document).ready(function(){
    alert('loaded')
    paper.install(window)
    paper.setup(myCanvas)

//    tool.minDistance = 10;

    var path;
    path = new Path();
    path.strokeColor = '#00000';

    function onMouseDown(event) {

        alert('test')
        console.log('test')

        path.add(event.point);
    }

    function onMouseDrag(event) {
        // Every drag event, add a segment
        // to the path at the position of the mouse:
        path.add(event.point);
        paper.PaperScript.load()
    }


})

Answer 1

您的问题是您的代码在JavaScript上下文中执行，并且正在定义命名函数onMouseDown和onMouseDrag，并希望它们的行为类似于PaperScript。 br /> 引用documentation：

安装事件处理程序
  当将它们声明为全局函数时，PaperScript可以识别几个特殊事件处理程序，而在JavaScript中，需要将它们手动安装在适当的对象上。两个这样的处理程序是onFrame和onResize，它们都属于View类。如果我们使用上例中的paperScope.setup（canvas）函数，则会自动为我们创建视图。因此，我们要做的就是将这些处理程序安装在现有的视图对象上。

使用工具
  就像视图处理程序一样，PaperScript通过使工具处理程序看起来像全局的，并且在存在以下任何处理程序的情况下为我们动态创建工具来简化和隐藏对Tool对象的处理：onMouseDown，onMouseUp，onMouseDrag，onMouseMove等

为方便起见，当您installing进入本地范围时，可以直接在暴露的view对象上设置事件处理程序。
这是您要实现的目标的简化示例（将鼠标拖动到画布上以绘制路径）：

// Export paper variables into current scope.
// That's why we can use `view` or `Path` directly.
paper.install(window);

// Bound paper to canvas.
paper.setup('canvas');

var path;

// On mouse down...
view.onMouseDown = function(event) {
  // ...init path.
  path = new Path();
  path.strokeColor = 'black';
};

// On mouse drag...
view.onMouseDrag = function(event) {
  // ...add point to the path.
  path.add(event.point);
};

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>

paperjs onmouse事件未触发

1 个答案: