Use Paper.js to draw on canvas

ionic-v1
5

Sorry for the delay!! Yes it works now, here is how I did :

  1. Include the paperJS library on the index.html :

    <script src="lib/paper/dist/paper-full.js">

  2. Create an ionic view with a canvas inside :

    <canvas id="canvas" ng-mousedown="downEvent($event)" on-touch="downEvent($event)" ng-mousemove="dragEvent($event)" on-drag="dragEvent($event)" ng-mouseup="upEvent($event)" on-release="upEvent($event)" height="400px" width="400px"> </canvas>

  3. Copy the paperJS “vector” function code inside of your controller :

    [click on the source button, top right canvas corner][1]

  4. Add this code to your controller :

    init(); function init(){ paper.install(window); paper.setup('canvas'); // your canvas html id }

  5. Change the JS code to the angular syntax :

    function onMouseDown(event) :arrow_right: $scope.downEvent = function(event)
    function onMouseDrag(event) :arrow_right: $scope.dragEvent = function(event)
    function onMouseUp(event) :arrow_right: $scope.upEvent = function(event)

  6. The event object structure from paperJS is not the same when runing on Ionic, On each 3 gesture function above I called :

    $scope.downEvent = function(event){ event.point = getPoint(event); ... ... ...

    function getPoint(event) { try { // on android return new Point(event.gesture.center.pageX, event.gesture.center.pageY - 44) // 44 = header bar pixel height } catch (e) { // on ionic serve, brower return new Point(event.x, event.y - 44); } }

  7. paperJS vector operations doesn’t work on my app, I replaced many times operations call:

    event.point - vectorStart :arrow_right: new Point(event.point.x - vectorStart.x, event.point.y - vectorStart.y)

  8. Here is the result, I can provide my code if someone need it

    image

:question: So the only solution I found was to specify the gesture functions to be called in the canvas, if someone knows another solution…
[1]: http://paperjs.org/tutorials/geometry/vector-geometry/#vektor.js

2 Likes