Fill area with custom pattern

[Roman Romanchenko]

Hi, all.

I try to find solution for filling area with specified pattern.

There is HTML canvas createPattern() Method, and it could be used

for filling. I think, that currently we couldn't set pattern item

to fillStyle of area, which defines in paper.js?

http://jsfiddle.net/RQpDC/ - this is example of filling with pattern ('cross-diagonal').

Thanks,

Roman.

[Roman Romanchenko]

Hi, all.

Does anybody have suggestions to solve situation?

Will paper.js support patterns for making specified fillStyle of drawing objects?

Thanks,

Roman.

[Jürg Lehni]

Yes pattern support is planned, along with many other planned features. There is no real timeline for new features at this point, but if a feature is crucial to a project, its implementation could be sponsored.

Best,

Jürg

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[nick hulea]

Roman, 

Is it possible you could use a raster fill ? 

Or did you need it to be canvas rendering the shapes?

Cause I think there is prob a way to render a canvas inside a raster fill ?

I was trying to do it but I'll have time tonight I could take a look ?

Might just get it to work regardless and post here

let me know

 thanks !

Nick

--
Nick Hulea the third
http://www.hulea.org
ph:330-207-3406

[Pierre Tandille]

I'm also really really interrested in pattern support !

I will try to do it by clipping mask... but it will be a bit dirty. If you know an other solution I'm also interrested.

Best,

Pierre

[Adil]

Hi Jürg,

 

I am also very interested in the pattern functionality. Specialy strokepatterns. I am also prepared to sponsor this functionality depending on the costs. Can you give me some more information?

 

Best regards,

 

Adil

Op maandag 7 april 2014 10:29:58 UTC+2 schreef Jürg Lehni:

[jbro...@gmail.com]

Hi Jürg,

Know this is old, was wondering what the update on this was.. did pattern support ever make it in? Was looking for an example or mention and can't find anything.

Thanks!

Best,

Joshua

[Jürg Lehni]

Not yet. We're in a bit of a feature freeze at the moment until 0.10.0 is rolled out with tons of bug-fixes. But it's still on the list of features to add, along with quite a few others.

[jbro...@gmail.com]

Thanks for the response. Achieved this with a clipped group and a compoundPath and raster.

this.group = new paper.Group({
    children: [this.compoundPath, this.raster],
    clipped: true

});

Out of curiousity, why was the decision made to have the first child be automagical, becoming the clipping mask, instead of having a more explicit property be set as the clippingMask in a group? Anytime, APIs venture into magical positions in arrays it always increases the barrier to learn and use significantly, usually a red flag. Just a heads up.

Side praise, overall API is amazing and is a joy to work with. Swinging by SF this weekend and was disapointed to see Viktor is not on display right now. Hope you are well and keep up the great work!

Much gratitude.

Best,

Joshua

[Jürg Lehni]

It's there: http://paperjs.org/reference/item/#clipmask

Group#clipped is just a short-cut to setting group.firstChild.clipMask = true

[Jürg Lehni]

On Feb 25, 2016, at 04:28 , jbro...@gmail.com wrote:

Side praise, overall API is amazing and is a joy to work with. Swinging by SF this weekend and was disapointed to see Viktor is not on display right now. Hope you are well and keep up the great work!

Thanks! Viktor is in the collection of the SFMOMA now, and they're going to reopen with a show in which it will be on display in May:

https://www.sfmoma.org/exhibition/typeface-interface/

And there's its younger sibling Otto, installed at the Long Now Foundation:

http://blog.longnow.org/02016/01/26/meet-otto/

So one by one, my slightly clumsy machines are slowly overtaking SF, which was the plan all along, of course.

: )

J

[Filipp Procenko]

Hello Jürg!

I've solved creating raster patterns in my project by creating a symbol definition of image and placing many instances of it in a group with clipping mask and then rasterizing the Group. I understand that this is not the best way to make this operation. And if there are many symbols, then sometimes rasterizing takes very long. But not always. Sometimes it's fast, but after a number of times the same pattern was created, it takes for too long.

Wondering if you can give me some advice on how to solve this functionality more graceful. And maybe you can tell me why rasterizing the same amount of SymbolItems takes different time after several repeated rasterizations. Maybe this is somehow relatedto caching?

Here's my code:

var instances = [];
var size = symbolDef.item.bounds.size;//size of one piece of pattern

//calculate number of rows and coloumns for pattern
var nx = Math.ceil(bounds.width / size.width);
var ny = Math.ceil(bounds.height / size.height);

//first pattern center
var startPoint = bounds.topLeft + new Point(size.width / 2, size.height / 2);
var pattern = new Group();

//place symbolItems
for (var i = 0; i < nx; i++)
    for (j = 0; j < ny; j++) {
        var instance = symDef.place(startPoint + [size.width * i, size.height * j]);
        pattern.addChild(instance);
    }

//add Background if given
if (backgroundColor) {
    var background = new Path.Rectangle(pattern.bounds);
    background.style = {
        fillColor: backgroundColor,
        strokeColor: null,
        strokeWidth: 0
    };
    pattern.insertChild(0, background);
}

var count = nx * ny;
var rasterPattern = pattern.rasterize(36);
pattern.removeChildren();//we need do this because otherwise symbolInstances are not being deleted
pattern.remove();
pattern = rasterPattern;

Thanks!

понедельник, 15 февраля 2016 г., 10:16:29 UTC+3 пользователь Jürg Lehni написал:

To unsubscribe from this group and stop receiving emails from it, send an email to pap...@googlegroups.com.