bomberstudios / sketch-framer

A Sketch plugin to easily export your mockups to FramerJS
Other
767 stars 67 forks source link

Mask support #33

Closed cemre closed 10 years ago

cemre commented 10 years ago

Since we can't access native masks in Sketch API yet, I built this halfway solution, where naming a child "maskframe" will export its frame as the mask of its parent.

This causes an extra layer traversal, so we could potentially optimize performance by folding this into the main layer traversal.

cemre commented 10 years ago

Example: image

The dimensions of "feed maskframe" will be set as the mask frame for "feed scroll". Since the parent layer has "scroll" in its name, it will also be scrollable. The fact that the masking rectangle is hidden in sketch doesn't matter.

cemre commented 10 years ago

@bomberstudios yay :)

bomberstudios commented 10 years ago

THANKS!

I'm merging this, but I would really love if you added that image to the README, as it makes it really easy to understand how masks work : )

postite commented 10 years ago

what do you mean by "Since we can't access native masks in Sketch API yet" did you try layerGroup.hasLayerWithMaskMode() ? it goes fine for me

bomberstudios commented 10 years ago

@postite I think he meant "since there is no documented way of accessing native masks..." : )

I didn't know about hasLayerWithMaskMode, but I'll surely play with it : )

P.S: did you get this from class-dump, or did this come from Pieter?

postite commented 10 years ago

yeah i found it using class-dump ... you can basically find which group are masked , find the mask , and set it clipped or not . it can be usefull for generating image and set the mask back again.

if you not afraid .. you can check my sketchApi externs . here https://github.com/postite/sketchApi/blob/master/MSLayerGroup.hx#L24 and here https://github.com/postite/sketchApi/blob/master/MSShapeGroup.hx#L3

i use it like this:

if( layer.hasLayerWithMaskMode()==2 ){ _trace("-------------mask found"); for ( l in layer.layers()){ if (l.hasClippingMask()){_trace("i'm the mask "+ l.name()); var shape:MSShapeGroup= cast l; shape.setHasClippingMask(false) ; //toggle } } }

cemre commented 10 years ago

Oh this is great! Yeah this is exactly what I need, to disable the mask while generating the image. Let me play with it.

On Tue, Feb 25, 2014 at 4:45 AM, postite notifications@github.com wrote:

yeah i found it using class-dump ... you can basically find which group are masked , find the mask , and set it clipped or not . it can be usefull for generating image and set the mask back again.

if you not afraid .. you can check my sketchApi externs . here https://github.com/postite/sketchApi/blob/master/MSLayerGroup.hx#L24 and here https://github.com/postite/sketchApi/blob/master/MSShapeGroup.hx#L3

i use it like this:

if( layer.hasLayerWithMaskMode()==2 ){

_trace("-------------mask found"); for ( l in layer.layers()){ if (l.hasClippingMask()){_trace("i'm the mask "+ l.name()); var shape:MSShapeGroup= cast l; shape.setHasClippingMask(false) ; //toggle

        }
    }
}

Reply to this email directly or view it on GitHubhttps://github.com/bomberstudios/sketch-framer/pull/33#issuecomment-36003573 .

Co-founder, Branch · @gem_ray http://twitter.com/gem_ray · http://cem.re · (415) 690-8123 · 220 E 23rd St #601, NY, NY 10010