Swift - how to fill a path (opaque path)

Question

I have a path which should have the shape of an isometric tile:

                let isometricPath = CGPathCreateMutable()
                CGPathMoveToPoint(isometricPath, nil, 0, -(tileSize.height / 2))
                CGPathAddLineToPoint(isometricPath, nil, (tileSize.width / 2), 0)
                CGPathAddLineToPoint(isometricPath, nil, 0, (tileSize.height / 2))
                CGPathAddLineToPoint(isometricPath, nil, -(tileSize.width / 2), 0)
                CGPathCloseSubpath(isometricPath)

and i try to make it an opaque path with this line of code:

let isometricPathRef = isometricPath as CGPathRef

but if i want to check if a CGPoint is inside that path with this:

CGPathContainsPoint(isometricPathRef, nil, locationInNode, true)

It detect the point only on the path but not inside.

How to make that possible?

Thanks

score 2 · Accepted Answer · answered Aug 29 '16 at 12:35

Your code is correct but you should probably look at the origins of your scene. Are your sure you can see your shape?

By default, a scene’s origin is placed in the lower-left corner of the view. So, a default scene is initialized with a height of 1024 and a width of 768, has the origin (0,0) in the lower-left corner, and the (1024,768) coordinate in the upper-right corner. The frame property holds (0,0)-(1024,768).

Suppose you have this example using your question code:

let tileSize = CGSizeMake(150.0,150.0)
// Your code:
let isometricPath = CGPathCreateMutable()
CGPathMoveToPoint(isometricPath, nil, 0, -(tileSize.height / 2))
CGPathAddLineToPoint(isometricPath, nil, (tileSize.width / 2), 0)
CGPathAddLineToPoint(isometricPath, nil, 0, (tileSize.height / 2))
CGPathAddLineToPoint(isometricPath, nil, -(tileSize.width / 2), 0)
CGPathCloseSubpath(isometricPath)

This path represent a rhombus shape.

Now if I want to draw this shape I can do:

let shape = SKShapeNode.init(path: isometricPath)
shape.strokeColor = SKColor.yellowColor()
shape.fillColor = SKColor.blueColor()
self.addChild(shape)

But nothing is showed because my scene origin start from 0.0 and your shape have negative values.

To show my rhombus I can simply change the scene anchorPoint to:

 self.anchorPoint = CGPointMake(0.5,0.5)

This centers the scene’s origin in the middle of the view (Apple docs) and you can see your tile:

Now suppose you want to know if a point is inside your shape:

let locationInNode = CGPointMake(tileSize.width/15,tileSize.height/15)
// this point is definitely inside the rhombus

I want to show this point simply for debug:

let circle = SKShapeNode.init(circleOfRadius: 5)
circle.strokeColor = SKColor.whiteColor()
circle.fillColor = SKColor.whiteColor()
self.addChild(circle)
circle.position = locationInNode

Now we can check if this point is inside the rhombus:

let isometricPathRef = isometricPath as CGPathRef
print(CGPathContainsPoint(isometricPathRef, nil, locationInNode, true))

Output:

Good idea Alessandro Ornano. In my question i didn't make clear that the isometric path is not somewhere in the scene but i check if the position of a touch lands inside a isometric tile by creating a path that looks like this isometric tile. The anchor point of that tile is (0.5, 0.5) so exactly in the middle of the Sprite. My fault sorry :( — frankibanki, Aug 29 '16 at 13:54

score 0 · Answer 2 · answered Aug 29 '16 at 13:44

Thank you for your detailed answer Alessandro Ornano. Origins of scene is a good hint. The problem is at another part of my program that did not posted. I have several isometric tiles in my scene which overlap and i try to figue out on which one a touch lands. My intent was to iterate over all touch elements touches: Set<UITouch in touchesEnded and test for every element if the touch land inside the isometric path or not.

for actualTouch in touches
        {
            let SKnode = self.nodeAtPoint(actualTouch.locationInNode(self))
            let spriteNode = SKnode as! SKSpriteNode
            if spriteNode.name != nil{
                let tileSize = CGSizeMake(75, 38)
                let locationInNode = actualTouch.locationInNode(SKnode)

                let isometricPath = CGPathCreateMutable()
                CGPathMoveToPoint(isometricPath, nil, 0, -(tileSize.height / 2))
                CGPathAddLineToPoint(isometricPath, nil, (tileSize.width / 2), 0)
                CGPathAddLineToPoint(isometricPath, nil, 0, (tileSize.height / 2))
                CGPathAddLineToPoint(isometricPath, nil, -(tileSize.width / 2), 0)
                CGPathCloseSubpath(isometricPath)
                let isometricPathRef = isometricPath as CGPathRef



                if CGPathContainsPoint(isometricPathRef, nil, locationInNode, true) == true
                {
                    print("touchedTile:\(spriteNode.name!)")
                    spriteNode.alpha = 1
                }

            }
        }

And the problem is: it only get the element with the highest z position for the test, but because the tiles are very small, to me it looked like it would only test for the strokes of the path(very confusing).

So anyway there is something wrong with the way i try to get the elements for all the touched Tiles. So your answer is right, there is nothing wrong with the first posted code.

Swift - how to fill a path (opaque path)

2 Answers2