Can Anyone Help Me Convert This Paperscript to Javascript?

Question

I have this paperscript from paper.js and i would like it to be converted in javascript but i cant get the mouse drag to work.

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.

Codepen of the paperscript

<script type="text/javascript" src=""></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>

Thank you in advance!

Accepted Answer

Differences between PaperScript and JavaScript contexts are detailled here.
In order to make the less changes possible to your code, you have to:

Install Paper.js in global scope. This allow you to use classes like Path, Point, ... directly (without passing trough global paper object).
Setup Paper.js to use your canvas. This is equivalent to setting the PaperScript canvas attribute.
Create a Tool instance that you will use to register your event handlers.
Use math operator functions (like Point.add()) instead of operators (like +) when manipulating points.

Here is your code working in JavaScript context.

// 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=""></script>
<canvas id="canvas" resize></canvas>

Can Anyone Help Me Convert This Paperscript to Javascript?

1 Answer

Must Read

Your Answer

David Miller

Can Anyone Help Me Convert This Paperscript to Javascript?

1 Answer

Must Read

Your Answer

Sign up or log in

Post as a guest

David Miller