Recommended Way to Extend Classes in Paper.js

Question

Is there a recommended way to extend classes in Paper.js? In particular, I'm interested in the Path extension

Sorry if my terminology is incorrect, but I just ask the same question about paper that is asked here about three here

Answer 1

Based on your comment on the original version of my answer, you are looking for an extension function (oops, that is what you meant) to execute the subclass. In a letter to the paper.js mailing list, Jürg Lechni (one of the creators) said:

As for the subclass, this is not what is supported at the moment. It may work, it may not be so, it can work in most cases, but not in very rare cases that are difficult to pinpoint, it may only take a couple of changes to make it work well, but it can be in many different places.

For example, each subclass of Item has a _type property, which is a string representing its type. Sometimes we check that instead of using instanceof, because it is faster, and so far, for example, for Path we simply assumed that there would be no subclass.

The complication is that there are no paper.Path.Rectangle objects. There are paths, and there are rectangles, but when you call new paper.Path.Rectangle() , it creates a new Path using an initialization code ( createRectangle ) that creates a rectangular shape.

So, we need to extend paper.Path . Unfortunately, when calling new paper.Path.Rectangle it calls createPath , which always returns Path (not the extension). Maybe you can do something like:

 var SuperRectangle = paper.Path.extend({ otherFunc: function() { console.log('dat'); } }); 

... and with the correct replacement / override for createRectangle or createPath get the subclass to work with. Unfortunately, I could not handle this.

My first working recommendation is to make a factory and add your functions to the objects in this factory ( jsbin here )

  var createSuperRectangle = function(arguments){ var superRect = new paper.Path.Rectangle(arguments); superRect.otherFunc = function(){ console.log('dat'); } return superRect; } var aRect = new Rectangle(20, 30, 10, 15); var aPath = createSuperRectangle({ rectangle: aRect, strokeColor: 'black' }); aPath.otherFunc(); 

Similarly, you can use factory to simply change the prototype for your SuperRectangles by adding your functions to this prototype object (and making it a prototype one of paper.Path.__proto__ ) ( jsbin here ):

  var superRectProto = function(){}; var tempRect = new paper.Path.Rectangle(); tempRect.remove(); superRectProto.__proto__ = tempRect.__proto__; superRectProto.otherFunc = function(){ console.log('dat'); } delete tempRect; var createSuperRectangle = function(arguments){ var superRect = new paper.Path.Rectangle(arguments); superRect.__proto__ = superRectProto; return superRect; } var aRect = new Rectangle(20, 30, 10, 15); var aPath = createSuperRectangle({ rectangle: aRect, strokeColor: 'black' }); aPath.otherFunc(); 

Alternatively, you can create an object that encapsulates Path ( jsbin here ):

  var SuperRectangle = function(arguments){ this.theRect = new paper.Path.Rectangle(arguments); this.otherFunc = function(){ console.log('dat'); } } var aRect = new Rectangle(20, 30, 10, 15); var aPath = new SuperRectangle({ rectangle: aRect, strokeColor: 'black' }); aPath.otherFunc(); aPath.theRect.strokeWidth = 5; 

Unfortunately, you must use theRect variable to access the path.

---

The initial incorrect answer follows:

I do not think that you mean "extending classes". In Javascript, you can extend objects to have more functions, so extending the Class class means that all Path objects have the same new features. The Javascript object extension is further described here .

If I'm wrong and you want to extend Path, you can use:

 paper.Path.inject({ yourFunctionName: function(anyArgumentsHere) { // your function here } }); 

However, I think you are really talking about creating new objects that basically behave like Path objects but have different functionality from each other. If so, then you can look at this answer about Javascript using prototype inheritance . For example, here I create two Rectangle objects that behave differently when I ask for their doSomething ( jsbin here ):

 var rect1 = new Path.Rectangle({ point: [0, 10], size: [100, 100], strokeColor: 'black' }); rect1.doSomething = function() { this.fillColor = new Color('red'); }; var rect2 = new Path.Rectangle({ point: [150, 10], size: [100, 100], strokeColor: 'black' }); rect2.doSomething = function() { this.strokeWidth *= 10; }; rect1.doSomething(); rect2.doSomething(); 

Answer 2

A few things.

1) You can wrap the original paperjs object, but this is a very hack playground for playing on paper

 function SuperSquare() { this.square = new Path.Rectangle({ size:50, fillColor:'red', onFrame:function(base) { var w2 = paper.view.element.width / 2; this.position.x = Math.sin(base.time) * w2 + w2; } }); } SuperSquare.prototype.setFillColor = function(str) { this.square.fillColor = str; } var ss = new SuperSquare(); ss.setFillColor('blue'); 

2) I can clone and create 2017 paper that runs on es6, so you can use the extend keyword.

3) I wrote an application called Flavas , but he never got the following, so I just left it. That being said, I have been playing with him lately; upgrading it to es6. With it, you can do what you are talking about.

 class Square extends com.flanvas.display.DisplayObject { constructor(size) { this.graphics.moveTo(this.x, this.y); this.graphics.lineTo(this.x + size, this.y); this.graphics.lineTo(this.x + size, this.y + size); this.graphics.lineTo(this.x, this.y + size); } someMethod(param) { trace("do something else", param); } ); 

I wrote all so fast, so feel free to push me to Q.