2

I'm drawing a path in Flex using Spark:Path.

I want to subtract a circle shape from this path, as in the following image:

enter image description here

(The path is black and wide)

Any ideas?

I tried creating a mask using a Shape object but couldn't quite manage to create a mask that has a circular hole in it.

Assaf Lavie
  • 73,079
  • 34
  • 148
  • 203

2 Answers2

8

Found it.

No masks involved.

I took the Path and wrapped a Group around it:

<s:Group blendMode="layer">
    <s:Path id="connector" ... />
    <s:Ellipse id="hole" blendMode="erase">

I set the blendMode to "layer" and added an ellipse after the path with blendMode erase

Assaf Lavie
  • 73,079
  • 34
  • 148
  • 203
2

You don't need to use a mask for this, just use the curveTo() method of the Graphics class:

var shape1:Shape = new Shape();
shape1.graphics.beginFill(0x000000);
shape1.graphics.moveTo(0,0);
shape1.graphics.lineTo(80,0);
shape1.graphics.curveTo(110,30,140,0);
shape1.graphics.lineTo(300,0);
shape1.graphics.lineTo(300,20);
shape1.graphics.lineTo(0,20);
shape1.graphics.lineTo(0,0);
shape1.graphics.endFill();

Which gives you:

enter image description here

This is obviously not using your exact dimensions, but demonstrates the principle.

shanethehat
  • 15,460
  • 11
  • 57
  • 87
  • I'm not drawing with Shape - I'm just trying to mask with it. My path object is a Spark:Path, and it needs to be a Spark:Path because I'm adding filters to it, etc. So I have this Path object out of which I want to take a "bite" in a circular shape. Hope it's clearer now. – Assaf Lavie Apr 05 '12 at 14:01
  • @gigantt - I'm not so sure about any Flex-related specifics, but in more general terms you can still use the above code, using the dimensions of your Path to set the shape's dimensions. Then apply this shape as the mask to your Path. Hopefully that would work with a Spark:Path too. – shanethehat Apr 05 '12 at 14:12