CODEWITHSUNDEEP
paperjs
user1050619
user1050619

Reputation: 20856

paperjs onmouse events not firing

I have a canvas and trying to setup the onmousedrag and onmouseup events in paperjs.

The events never gets fired up when I try to draw something on the canvas object.

<!-- 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()
    }


})

Upvotes: 0

Views: 1217

Answers (1)

sasensi
sasensi

Reputation: 4650

Your problem is that your code is executed in JavaScript context and you are defining named function onMouseDown and onMouseDrag and expect them to behave like in PaperScript context.
Quoting from documentation:

Installing Event Handlers
PaperScript recognises a couple of special event handlers when they are declared as global functions, while in JavaScript, these need to be manually installed on the appropriate object. Two such handlers are onFrame and onResize, which both belong to the View class. view is automatically created for us if we use the paperScope.setup(canvas) function as in the examples above. So all we have to do is install these handlers on the existing view object.

Working with Tools
Just like with the view handlers, PaperScript simplifies and hides the dealing with Tool objects by making the tool handlers seem global and by creating a tool for us on the fly if any of these handlers are present: onMouseDown, onMouseUp, onMouseDrag, onMouseMove, etc.

For convenience, as you are installing paper into local scope, you can directly set events handlers on the exposed view object.
Here is a simplified example of what you were trying to achieve (drag your mouse over the canvas to draw a path):

// 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>

Upvotes: 2

Related Questions