CAShapeLayer tap detection in Swift 3 - ios

I have a CAShapeLayer for which I have marked the fill color as clear.
When I tap on the line it does not always detect if the CAShapeLayer cgpath contains the tap point. My code is as follows:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
let touch = touches.first
guard let point = touch?.location(in: self) else { return }
for sublayer in self.layer.sublayers! {
if let l = sublayer as? CAShapeLayer {
if let path = l.path, path.contains(point) {
print("Tap detected")
}
}
}
}
On some occasions it detects it if I really click on the center on the line.
So I thought of making the line very fat from 6 to 45. Still it did not work. Then I thought of making the fill as gray after this now when i tap on the fill gray color it always detects the tap. I am really confused why it detects tap on fill or very center of the line why not on the whole thickness of line.

Swift 4, answer is based on explanation and link to CGPath Hit Testing - Ole Begemann (2012) by caseynolan in other comment:
From Ole Begemann blog:
contains(point: CGPoint)
This function is helpful if you want to hit test on the entire region
the path covers. As such, contains(point: CGPoint) doesn’t work with
unclosed paths because those don’t have an interior that would be
filled.
copy(strokingWithWidth lineWidth: CGFloat, lineCap: CGLineCap, lineJoin: CGLineJoin, miterLimit: CGFloat, transform: CGAffineTransform = default) -> CGPath
This function creates a mirroring tapTarget object that only covers
the stroked area of the path. When the user taps on the screen, we
iterate over the tap targets rather than the actual shapes.
My solution in code
I use a UITapGestureRecognizer linked to the function tap():
var tappedLayers = [CAShapeLayer]()
#IBAction func tap(_ sender: UITapGestureRecognizer) {
let point = sender.location(in: imageView)
guard let sublayers = imageView.layer.sublayers as? [CAShapeLayer] else {
return
}
for layer in sublayers {
// create tapTarget for path
if let target = tapTarget(for: layer) {
if target.contains(point) {
tappedLayers.append(layer)
}
}
}
}
fileprivate func tapTarget(for layer: CAShapeLayer) -> UIBezierPath? {
guard let path = layer.path else {
return nil
}
let targetPath = path.copy(strokingWithWidth: layer.lineWidth, lineCap: CGLineCap.round, lineJoin: CGLineJoin.round, miterLimit: layer.miterLimit)
return UIBezierPath.init(cgPath: targetPath)
}

I think the problem is that CGPath.contains() doesn't operate the way you expect it to.
From Apple's CGPath docs:
Discussion
A point is contained in a path if it would be inside the painted region when the path is filled.
So the method isn't actually checking if you're intersecting a drawn line, it's checking if you're intersecting the shape (even if you're not explicitly filling the path).
Some basic experiments show that the method returns true if the supplied point:
Sits exactly in the middle of a line/path (not including the line's drawn outline from the CAShapeLayer's lineWidth) or
Is in the middle of where the path would create a solid shape (as if it had been closed and filled).
You might find some workarounds here on Stack Overflow (it seems that many others have had the same problem before). E.g. Hit detection when drawing lines in iOS.
You might also find this blog post useful: CGPath Hit Testing - Ole Begemann.

Related

Is it possible to group images by drawing lines on it in iOS swift?

For an example if i have multiple images on views in random position. Images are selected by drawing lines on it and group images by using gestures. Right now i can able to show images randomly but not able group images by drawing line on it.
Here screenshot 1 is result which i have getting now:
screenshot 2 which is exactly what i want.
For what you are trying to do I would start by creating a custom view (a subclass) that is able to handle gestures and draw paths.
For gesture recognizer I would use UIPanGestureRecognizer. What you do is have an array of points where the gesture was handled which are then used to draw the path:
private var currentPathPoints: [CGPoint] = []
#objc private func onPan(_ sender: UIGestureRecognizer) {
switch sender.state {
case .began: currentPathPoints = [sender.location(in: self)] // Reset current array by only showing a current point. User just started his path
case .changed: currentPathPoints.append(sender.location(in: self)) // Just append a new point
case .cancelled, .ended: endPath() // Will need to report that user lifted his finger
default: break // These extra states are her just to annoy us
}
}
So if this method is used by pan gesture recognizer it should track points where user is dragging. Now these are best drawn in drawRect which needs to be overridden in your view like:
override func draw(_ rect: CGRect) {
super.draw(rect)
// Generate path
let path: UIBezierPath = {
let path = UIBezierPath()
var pointsToDistribute = currentPathPoints
if let first = pointsToDistribute.first {
path.move(to: first)
pointsToDistribute.remove(at: 0)
}
pointsToDistribute.forEach { point in
path.addLine(to: point)
}
return path
}()
let color = UIColor.red // TODO: user your true color
color.setStroke()
path.lineWidth = 3.0
path.stroke()
}
Now this method will be called when you invalidate drawing by calling setNeedsDisplay. In your case that is best done on setter of your path points:
private var currentPathPoints: [CGPoint] = [] {
didSet {
setNeedsDisplay()
}
}
Since this view should be as an overlay to your whole scene you need some way to reporting the events back. A delegate procedure should be created that implements methods like:
func endPath() {
delegate?.myLineView(self, finishedPath: currentPathPoints)
}
So now if view controller is a delegate it can check which image views were selected within the path. For first version it should be enough to just check if any of the points is within any of the image views:
func myLineView(sender: MyLineView, finishedPath pathPoints: [CGPoint]) {
let convertedPoints: [CGPoint] = pathPoints.map { sender.convert($0, to: viewThatContainsImages) }
let imageViewsHitByPath = allImageViews.filter { imageView in
return convertedPoints.contains(where: { imageView.frame.contains($0) })
}
// Use imageViewsHitByPath
}
Now after this basic implementation you can start playing by drawing a nicer line (curved) and with cases where you don't check if a point is inside image view but rather if a line between any 2 neighbor points intersects your image view.

Detecting stroked uibezierpath contains point

I'm drawing a stroked path in my view. And I'm trying to see if the stroked path contains a specific point. But it the contains method does not detect if the point is in the stroked path.
func checkCollision(currentPoint:CGPoint) -> CustomShape?{
for shape in customShapes {
//Check if current shapes uibezierpath contains a point
if (shape.path.contains(currentPoint)) {
return shape
}
}
return nil
}
Swift 5.x
You can use this extension for a quick answer:
extension UIBezierPath {
func isInsideBorder(_ pos:CGPoint, tolleranceWidth:CGFloat = 2.0)->Bool{
let pathRef = cgPath.copy(strokingWithWidth: tolleranceWidth, lineCap: CGLineCap.butt, lineJoin: CGLineJoin.round, miterLimit: 0)
let pathRefMutable = pathRef.mutableCopy()
if let p = pathRefMutable {
p.closeSubpath()
return p.contains(pos)
}
return false
}
}
Usage:
var currentPoint:CGPoint= CGPoint.zero
if yourBeizerPath.isInsideBorder(currentPoint, tolleranceWidth:3.0) {
/// Let's go, it's inside..
}
Override the hitTest(_:with:) instance method of your custom UIView. This method returns the view object that is the farthest descendent of the current view and contains point. It returns nil if the point lies completely outside the receiver’s view hierarchy.
https://developer.apple.com/documentation/uikit/uiview/1622469-hittest
override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
guard path.contains(point) else {
return nil
}
return self
}
One way to check if a point is inside a stroked path is to do a copy of the path and add a stroke using cgPath's copy method.
let strokedPath = yourPath.cgPath.copy(
strokingWithWidth: 10,
lineCap: CGLineCap.butt,
lineJoin: CGLineJoin.miter,
miterLimit: 0
)

Sprite-Kit: color xor logic with two sprites. black + black = white

Do you know the puzzle game „voi“? That is a game which works with color-XOR-logic. That means: black + black = white.
https://www.youtube.com/watch?v=Aw5BdVcAtII
Is there any way to do the same color logic with two sprite nodes in sprit kit?
Thanks.
Of course, it's possible to do that in Sprite Kit.
Problem:
Let's say you have 2 black squares, squareA and squareB. The user can drag these two squares wherever he wants to. He can drag only one square at a time. You want to color the intersect area to white whenever the two squares intersect.
Initial Setup:
At the top of your scene, there are a few variables that we need to create:
private var squareA: SKSpriteNode?
private var squareB: SKSpriteNode?
private var squares = [SKSpriteNode]()
private var selectedShape: SKSpriteNode?
private var intersectionSquare: SKShapeNode?
squareA and squareB are just the 2 squares that we initially have on screen.
squares is an array and it will store all the squares that are showing on screen.
selectedShape will help us keeping track of the square that is currently being dragged.
intersectionSquare is a white square that represents the intersection area between the two black squares.
Then initialize squareA and squareB, and add them to the squares array like so:
squareA = SKSpriteNode(color: .black, size: CGSize(width: 190.0, height: 190.0))
if let squareA = self.squareA {
squareA.position = CGPoint(x: -200, y: 200)
squareA.name = "Square A"
squares.append(squareA)
self.addChild(squareA)
}
// Do the same for squareB or any other squares that you have on screen..
Note: As you can see, I gave it a name here just to make it easier to differentiate them during the testing phase.
Detect when user is dragging a square:
Now, you need to detect when the user is dragging a square. To do this, you can use:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchDown(atPoint: t.location(in: self)) }
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchMoved(toPoint: t.location(in: self)) }
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchUp(atPoint: t.location(in: self)) }
}
override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchUp(atPoint: t.location(in: self)) }
}
These are just helper methods that are going to make our life easier.
Then, you need to setup touchDown, touchMoved and touchUp methods:
func touchDown(atPoint pos : CGPoint) {
let touchedNode = self.nodes(at: pos)
guard let selectedSquare = touchedNode.first as? SKSpriteNode else {
return
}
selectedShape = selectedSquare
}
func touchMoved(toPoint pos : CGPoint) {
guard let selectedSquare = self.selectedShape else {
return
}
selectedSquare.position = pos
checkIntersectionsWith(selectedSquare)
}
func touchUp(atPoint pos : CGPoint) {
selectedShape = nil
}
To explain you in more details what is going on here:
In the touchDown method:
Well, we need the user to be able to drag only one square at a time. Using the nodes(at:) method, it's easy to know which square was touched, and we can know set our selectedShape variable to be equal to the square that was touched.
In the touchMoved method:
Here we are basically just moving the selectedShape to the position the user moves his finger at. We also call the checkIntersectionsWith() method that we will setup in a second.
In the touchUp method:
The user released his finger from the screen, so we can set the selectedShape to nil.
Change the color of the intersection frame:
Now the most important part to make your game actually look like the one you want to make, is how to change the color of the intersection frame to white when two black squares are intersecting ?
Well, you have different possibilities here, and here is one possible way of doing it:
private func checkIntersectionsWith(_ selectedSquare: SKSpriteNode) {
for square in squares {
if selectedSquare != square && square.intersects(selectedSquare) {
let intersectionFrame = square.frame.intersection(selectedSquare.frame)
intersectionSquare?.removeFromParent()
intersectionSquare = nil
intersectionSquare = SKShapeNode(rect: intersectionFrame)
guard let interSquare = self.intersectionSquare else {
return
}
interSquare.fillColor = .white
interSquare.strokeColor = .clear
self.addChild(interSquare)
} else if selectedSquare != square {
intersectionSquare?.removeFromParent()
intersectionSquare = nil
}
}
}
Every time the checkIntersectionsWith() method is called, we are iterating through the nodes that are inside our squares array, and we check, using the frame's intersection() method, if the selected square intersects with any of these (except itself). If it does, then we create a white square, named intersectionSquare, and set its frame to be equal to the intersection frame.
And to save up your memory usage, you can delete the square from the scene and set intersectionSquare to nil if there is no intersection at all.
Final result:
The final result would look like this:
That's just a rapid draft that I made to show you on you could approach the problem, and obviously there are many things that you could add or improve (apply this to a situation where you have not only 2 but many squares on screen, or create a kind of magnetism effect for when your user release his finger from the screen, etc) but I hope at least it will put you on the right track for your project :)

swift and sprite kit drawing a straight line while dragging your finger on the screen

I'm trying to draw a single, straight line using UITouch and Spritekit. Where the line keeps showing during the dragging motion of my finger. if anyone knows a certain tutorial or can run me through the way of doing it i would be thankful
Probably not the best way to implement it, but it's simple. Just copy and paste this into your GameScene.swift
import SpriteKit
import GameplayKit
class GameScene: SKScene {
private var line:SKShapeNode = SKShapeNode()
private var path:CGMutablePath = CGMutablePath()
private var initialPointSet:Bool = false
override func didMove(to view: SKView) {
line.strokeColor = UIColor.orange
line.lineWidth = 4
addChild(line)
}
func touchMoved(toPoint pos : CGPoint) {
if !initialPointSet {
path.move(to: pos)
initialPointSet = true
}
path.addLine(to: pos)
line.path = path
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for t in touches { self.touchMoved(toPoint: t.location(in: self)) }
}
}
SpriteKit has some of the worst 2D drawing ever presented in a 2D game engine.
Actually, the worst.
SKShapeNode and its CGPath are atrocious nonsense. It's as if the
"designers" of SpriteKit have never once looked at the most primitive
of 2D drawing in anything like DirectX or OpenGL. Let alone the kinds
of things that animators might want to do with lines and shape
creation, mutation, distortion and progress and line animation. ~ Confused
Having gotten that little rant off my chest, in the vain hope that it recalibrates your expectations to not expect a drawing style solution, consider this:
SKSpriteNodes can be a simple box, and they can be scaled in both the X and Y axis, and they can be parented to a "dummy" SKNode that rotates to face the direction of the current touch, relative to the original position of the touch.
SO.... you can draw a skinny box, starting at the point of the initial touch, and as the touch is moved, scale the SKSpriteNode to that point by both rotating the SKDummyNode you create to be the parent of your "line", and then scaling it out along that length from the origin to the current position of the touch.
Viola, a LINE!
Of sorts.

Properly subclassing MKOverlayRenderer

I'm trying to modify the path of a MKPolyline at runtime to avoid it overlaps with another one.
I already managed to get all the overlapping points and what I'm trying to do is in the func createPath() of the MKPolylineRenderer add an offset to does points so, theoretically, it should draw the same path with the little offset I'm adding and it shouldn't overlap anymore, but sadly, this is not happening and the Polyline is drawn in the same way like nothing changed.
I first tried to do this after the addPolyline() function but I read that once you do that, the one way to redraw a Polyline is by removing it and adding it again, so I decided, for testing purposes, to do all of this before adding the Polyline so when I finally add it to the map, it will already have the information about the overlapping points, but this didn't worked either.
Hypothesis:
1. It has something to do that the map works on different threads and the changes are not reflected because of that. This is ok. It should be this way to optimise the rendering.
2. The correct way to accomplish this is not in the createPath() function. Indeed it isn't
I should apply a transform in the draw() function of the renderer. This is it
This is the createPath() function
override func createPath()
{
let poly = polyline as! TransportPolyline
switch poly.id
{
case 1:
let newPath = CGMutablePath()
for index in 0...poly.pointCount
{
let point = poly.points()[index]
let predicate = { MKMapPointEqualToPoint($0, poly.points()[index]) }
//This is the offset I should apply
let offset: CGFloat = overlapsAtPoints.contains(predicate) ? 100000.0 : 0.0
//I tried to use a transform as well, but the result was the same
var transform = CGAffineTransform(translationX: offset, y: offset)
if index == 0
{
//Here I add the offset and/or the transform without success
newPath.moveTo(&transform, x: CGFloat(point.x) + offset, y: CGFloat(point.y) + offset)
}
else
{
//Here as well
newPath.addLineTo(&transform, x: CGFloat(point.x) + offset, y: CGFloat(point.y) + offset)
}
}
//Set the new path to the Renderer path property
self.path = newPath
default: break
}
}
And this is the draw() function
override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext)
{
let poly = polyline as! TransportPolyline
guard poly.id == 1 else {
super.draw(mapRect, zoomScale: zoomScale, in: context)
return
}
//If I apply this the Polyline does move, obviously it move all the Path and not only the segments I want.
context.translate(x: 1000, y: 1000)
super.draw(mapRect, zoomScale: zoomScale, in: context)
}
Any suggestions are much appreciated.
UPDATE:
I found out that the problem might be in how I'm drawing the context in the draw method.
The documentation says:
The default implementation of this method does nothing. Subclasses are
expected to override this method and use it to draw the overlay’s
contents.
so by calling super.draw() I'm not doing anything.
Any ideas on how to properly override this method? Also taking into consideration this:
To improve drawing performance, the map view may divide your overlay
into multiple tiles and render each one on a separate thread. Your
implementation of this method must therefore be capable of safely
running from multiple threads simultaneously. In addition, you should
avoid drawing the entire contents of the overlay each time this method
is called. Instead, always take the mapRect parameter into
consideration and avoid drawing content outside that rectangle.
So basically I was on the right track but using the wrong tools. The actual way to accomplish this is by overriding the draw() function in you MKPolylineRenderer subclass.
override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext)
{
//First validate that the Rect you are asked to draw in actually
has some content. See last quote above.
let theMapRect: MKMapRect = self.overlay.boundingMapRect;
guard (MKMapRectIntersectsRect(mapRect, theMapRect)) || self.path != nil else {
return
}
//Do some logic if needed.
//Create and draw your path
let path = CGMutablePath()
path.moveTo(nil, x: self.path.currentPoint.x, y: self.path.currentPoint.y)
path.addLines(nil, between: remainingPoints, count: remainingPoints.count)
context.addPath(path)
//Customise it
context.setStrokeColor(strokeColor!.cgColor)
context.setLineWidth((lineWidth + CGFloat(0.0)) / zoomScale)
//And apply it
context.strokePath()
}
By doing this I was able to successfully draw the path I wanted for each overlay without any troubles.

Resources