two.js

two.js copied to clipboard

Is there a way to use a group to mask another group? I tried it and it didn't work.

It looks like snap.svg is supporting it .

It's commented out because of this Chromium Issue. You can re-enable it by uncommenting these lines.

In the meantime I can see what snap.svg does and see if it makes sense to incorporate into Two.js. snap.svg has the benefit of only rendering to SVG.., so it may not be possible for it to work the same way for canvas / webgl.

Thanks for the information!

I tried uncommenting out the lines but it still doesn't seem to work. Am i missing something?

var mask_group = two.makeGroup();
two.makeCircle(0, 0, 60).addTo(mask_group);
two.makeRectangle(40, 40, 90, 90).addTo(mask_group);
mask_group.center();

var bounding_box = mask_group.getBoundingClientRect();
var bg = two.makeGroup(two.makeRectangle(0, 0, bounding_box.width, bounding_box.height));
bg.mask = mask_group;

var group = two.makeGroup(mask_group, bg);
group.translation.set(two.width / 2, two.height / 2);

Ah, sorry about that. I think the group.mask property expects a Two.Path not another group... I'll have to look into the details further on how snap does group to group masking. Sorry!

no worries. thanks for your help!