Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Based on your comment to the initial version of my answer, you are looking for the 'extend' function (oops, that was exactly what you meant) to do subclassing. In an <a href="https://groups.google.com/d/msg/paperjs/s-UvVuqt_tM/E5bzN9WHzogJ" rel="nofollow noreferrer">email to the paper.js mailing list</a>, Jürg Lehni (one of the creators) said:</p> <blockquote> <p>As for subclassing, that's not something that is supported at the moment. It might work, it might not, it might work in most cases, but not in very rare cases that are hard to pinpoint, it might need only a couple of changes to make it work well, but those might be in many different places. </p> <p>For example, each Item subclass has a _type property which is a string representing its type. Sometimes we check that instead of using instanceof, because it's faster, and so far, for example for Path we just assumed there would be no subclassing.</p> </blockquote> <p>A complication is that there are no <code>paper.Path.Rectangle</code> objects. There are paths, and there are rectangles, but when you call <code>new paper.Path.Rectangle()</code> it creates a new <code>Path</code> using initialization code (<code>createRectangle</code>) that creates a rectangular shape.</p> <p>So we would need to extend <code>paper.Path</code>. Unfortunately, when you call <code>new paper.Path.Rectangle</code> it calls <code>createPath</code>, which always returns a <code>Path</code> (not your extension). It may be possible to do something like:</p> <pre><code>var SuperRectangle = paper.Path.extend({ otherFunc: function() { console.log('dat'); } }); </code></pre> <p>...and with correctly substituting/overriding for <code>createRectangle</code> or <code>createPath</code> get a subclass to work. Unfortunately, I have not been able to manage it.</p> <p>My first working recommendation is to make a factory and add your functions to the objects in that factory (<a href="http://jsbin.com/obekal/4/edit" rel="nofollow noreferrer">jsbin here</a>):</p> <pre><code> 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(); </code></pre> <p>Similarly, you can use the factory to just change the prototype for your SuperRectangles, having added your functions to that prototype object (and making <strong>its</strong> prototype the one from <code>paper.Path.__proto__</code>) (<a href="http://jsbin.com/obekal/8/edit" rel="nofollow noreferrer">jsbin here</a>):</p> <pre><code> 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(); </code></pre> <p>Alternatively, you can make an object that encapsulates the Path (<a href="http://jsbin.com/obekal/6/edit" rel="nofollow noreferrer">jsbin here</a>):</p> <pre><code> 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; </code></pre> <p>Unfortunately, then to access the path you have to use the <code>theRect</code> variable.</p> <hr> <p>Initial incorrect answer follows:</p> <p>I don't think you mean "extending classes". In Javascript you can extend objects so that they have more functions, so extending the Path "class" would mean all Path objects have the same new functions. Javascript object extension is further described <a href="http://phrogz.net/js/Classes/ExtendingJavaScriptObjectsAndClasses.html" rel="nofollow noreferrer">here</a>.</p> <p>If I'm wrong, and you do want to extend Path, then you can use:</p> <pre><code>paper.Path.inject({ yourFunctionName: function(anyArgumentsHere) { // your function here } }); </code></pre> <p>However, I think you are actually talking about creating new objects that mostly behave like Path objects but have different functionality from each other. If that is the case, then you may want to look at this answer about <a href="https://stackoverflow.com/questions/186244/what-does-it-mean-that-javascript-is-a-prototype-based-language">Javascript using prototypical inheritance</a>. For example, here I create two Rectangle objects that behave differently when I ask them to <code>doSomething</code> (<a href="http://jsbin.com/obekal/1/edit" rel="nofollow noreferrer">jsbin here</a>):</p> <pre><code>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(); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload