I am making an iOS drawing app and would like to add functionality where erasing a UIBezierPath will erase the whole path and not just overlay the segment with a white color.
I have an array of UIBezierPaths stored, but I am not sure how efficient it is to loop through the entire array for each touch point, detect if it intersects with the current touch point, and remove it from the array.
Any suggestions?
If I understand correctly you need to loop through path at least. They are independent after all.
An UIBezierPaths has method contains which would tell you if a point is inside the path. If that is usable then what you need to do is simply
paths = paths.filter { !$0.contains(touchPoint) }
But since this is drawing app it is safe to assume you are using stroke and not fill which will most likely not work with contains the way you want it to.
You could do the intersection manually and it should have relatively good performance up until you have too many points. But when you have too many points I wager drawing performance will be more of your concern. Still the intersection may be a bit problematic with including some stroke line width; user would need to cross the center of your line to detect a hit.
There is a way though to convert stroked path to filled path. Doing that will then enable you to use contains method. The method is called replacePathWithStrokedPath but the thing is that it only exists on CGContext (At least I have never managed to find an equivalent on UIBezierPath). So procedure to do so includes creating a context. For instance something like this will work:
static func convertStrokePathToFillPath(_ path: UIBezierPath) throws -> UIBezierPath {
UIGraphicsBeginImageContextWithOptions(CGSize(width: 1.0, height: 1.0), true, 1.0)
guard let context = UIGraphicsGetCurrentContext() else { throw NSError(domain: "convertStrokePathToFillPath", code: 500, userInfo: ["dev_message":"Could not generate image context"]) }
context.addPath(path.cgPath)
context.setLineWidth(path.lineWidth)
// TODO: apply all possible settings from path to context
context.replacePathWithStrokedPath()
guard let returnedPath = context.path else { throw NSError(domain: "convertStrokePathToFillPath", code: 500, userInfo: ["dev_message":"Could not get path from context"]) }
UIGraphicsEndImageContext()
return UIBezierPath(cgPath: returnedPath)
}
So the result should look something like:
static func filterPaths(_ paths: [UIBezierPath], containingPoint point: CGPoint) -> [UIBezierPath] {
return paths.filter { !(try! convertStrokePathToFillPath($0).contains(point)) }
}
Related
I'm trying to put together a simple drawing app using PencilKit. However, when I zoom in on the canvas, I'd like the stroke to be thinner (visually the same size on the screen as it was before zooming in, but once I zoom all the way out, the result would be thinner). Moreover, I'd like the strokes to be always uniform, which means not change its size based on speed/timing of stroke, angle, etc. A simple scribbling pad. I have a fully working drawing canvas already, but I can't make those extra requirements work. Here's what I tried:
Conformed to PKCanvasViewDelegate and implemented canvasViewDidEndUsingTool. There, I added my code to customize the strokes, for instance this snippet that transforms everything to have a uniform 5x5 stroke:
func canvasViewDidEndUsingTool(_ canvasView: PKCanvasView) {
dump(canvasView.drawing.strokes.count)
var newDrawingStrokes = [PKStroke]()
for stroke in canvasView.drawing.strokes {
var newPoints = [PKStrokePoint]()
stroke.path.forEach { (point) in
let newPoint = PKStrokePoint(
location: point.location,
timeOffset: point.timeOffset,
size: CGSize(width: 5,height: 5),
opacity: CGFloat(1),
force: point.force,
azimuth: point.azimuth,
altitude: point.altitude
)
newPoints.append(newPoint)
}
let newPath = PKStrokePath(controlPoints: newPoints, creationDate: Date())
newDrawingStrokes.append(PKStroke(ink: PKInk(.pen, color: .white), path: newPath))
}
let newDrawing = PKDrawing(strokes: newDrawingStrokes)
canvasView.drawing = newDrawing
}
This delegate gets called when I finish drawing a stroke on the canvas. However, upon invoking the canvasView.drawing = newDrawing on the last line, I get this log on the console:
[] Drawing count mismatch!
And the stroke I just drew disappears.
I don't know what's wrong with this since my snippet simply iterates over the existing strokes, modify them, and set them again on the drawing. I found no documentation around this and Google earned 0 results for this error/warning message.
Appreciate any help.
I have a Canvas UIView as below. (Following https://youtu.be/E2NTCmEsdSE)
class Canvas: UIView {
override func draw(_ rect: CGRect){
super.draw(rect)
guard let context = UIGraphicsGetCurrentContext() else { return }
// Other codes
context.setLineWidth(10)
context.setLineCap(.round)
context.strokePath()
}
// Other codes
}
Looks like I can only setLineWidth and setLineCap inside the draw function. That means whenever a draw happens, they will get set again and again.
I wonder, is there a way for me to set the drawing attribute once per launch and not to set over and over again?
AFAIK UIKit uses contexts to draw almost everything, changing attributes globally would have a huge impact.
What you could do is to extend CGContext to either set the attributes you want or perform the stroke with the attributes you want.
extension CGContext {
func applyAppStyle() {
context.setLineWidth(10)
context.setLineCap(.round)
}
func strokeWithAppStyle() {
context.setLineWidth(10)
context.setLineCap(.round)
context.strokePath()
}
}
As you've been told, you can certainly move the multiple lines of code off to a utility function if you don't like having them march down the page inside the draw method.
Another possibility is to construct, in advance, in code, a UIImage (by drawing into its context), and then just draw that into the view context in the draw method. Surprisingly, though, that is less efficient than what you are doing, because it means storing all the pixels and then copying them all into the context at draw time.
The important thing to understand is that your code is correct, as it stands. What you are doing is what you do. Your code is not inefficient or slow; it may seem verbose, but that's just the way things are. Drawing commands are highly optimized; drawing is, after all, the very essence of app display.
Keep in mind that the context does not necessarily persist, and that calls to draw are not particularly frequent (indeed, it is not uncommon for a view to be told to draw just once in the lifetime of the app).
So just obey the rules: when you are told to draw, do the complete drawing.
I want to display a map in my iOS application. Therefor, I got a floorplan image (UIImage) and use the following code to render paths (which represent the buildings or rooms) onto the map image:
static func draw(paths: [[CGPoint]], toImage image: UIImage?) -> UIImage? {
if let image = image {
let renderer = UIGraphicsImageRenderer(size: image.size)
return renderer.image { context in
image.draw(at: CGPoint(x: 0, y: 0))
context.cgContext.setFillColor(UIColor.init(white: 0.1, alpha: 0.5).cgColor)
for path in paths {
if path.count > 2 {
context.cgContext.move(to: path[0])
for point in path {
context.cgContext.addLine(to: point)
}
context.cgContext.addLine(to: path[0])
}
}
context.cgContext.drawPath(using: .fill)
}
} else {
return nil
}
}
The result of this method is then set to an UIImageView. However, this takes about two seconds, so way too long.
I am new to iOS development and this was the only way I found.
Does anyone know a faster way? Maybe using custom views or something?
I would suggest to have a look at CAShapeLayer, it is usually quite fast, although I can't say if it outperforms UIGraphicsImageRenderer in your case. My guess is that it will, because it also scales as needed, so removes the need to create a large image.
In case you are new to layers, they are like views except they don't have a user input part. They are easy to work with, since every UIView actually have a .layer for its rendering, which also can be used as a layer parent.
To make a layer work with a view, you just add it to your views layer property as a sub-layer, and then make sure it has the right size. Best way to size the layer is either by using the layers .contentsGravity or to set it manually in the views layoutSubviews.
Read more about CAShapeLayer in the docs
A tutorial on layers
As a user traces along a line, a SKShapeNode path is built from line segments (which come from underlying 'tiles'). The actual path is built by locking in lines the user has previously dragged over, and finding the closest point on the closest line to the latest touch point, then building a path like so:
var activatedPointPath: UIBezierPath {
let activatedPointPath = UIBezierPath()
// self.state.activatedPoints contains the end point
// of each full line segment the user has traced through
if let firstActivatedPoint = self.state.activatedPoints.first {
activatedPointPath.move(to: firstActivatedPoint)
for activatedPoint in self.state.activatedPoints {
activatedPointPath.addLine(to: activatedPoint)
}
// self.state.endOfLine contains the last point the user
// has touched, which may or may not be at the end of a line
// segment
if let lastPoint = self.state.endOfLine {
activatedPointPath.addLine(to: lastPoint)
}
}
return activatedPointPath
}
this is then assigned to the SKShapeNode as:
self.lineNode.path = self.activatedPointPath.cgPath
however when the user is tracing the line, previous segments flicker with triangles missing while being drawn to the screen, like so:
The images above are from a simple 3x3 tile grid allowing the user to trace a simple straight line:
Here is a more complex example, where the line starts on the bottom left and ends at the top right:
What could be causing these artifacts?
edit while I have found a solution to this issue, I would still welcome any explanation for why the original code didn't work and the new code does.
My fix for this issue was to change the activatedPointPath calculated variable to build the line out of segments combined together, rather than drawing the line in one pass.
The new code looked like this:
var previousPoint = firstActivatedPoint
for activatedPoint in self.state.activatedPoints {
let newSegment = UIBezierPath()
newSegment.move(to: previousPoint)
newSegment.addLine(to: activatedPoint)
activatedPointPath.append(newSegment)
previousPoint = activatedPoint
}
if let lastPoint = self.state.endOfLine {
let newSegment = UIBezierPath()
newSegment.move(to: previousPoint)
newSegment.addLine(to: lastPoint)
activatedPointPath.append(newSegment)
} else {
print("No last point")
}
which now produces smooth lines.
I would like to allow the user to draw curves in such a way that no line can cross another line or even itself. Drawing the curves is no problem, and I even found that I can create a path that is closed and still pretty line-like by tracing the nodes of the line forwards and back and then closing the path.
Unfortunately, iOS only provides a test for whether a point is contained in a closed path (containsPoint: and CGPathContainsPoint). Unfortunately, a user can pretty easily move their finger fast enough that the touch points land on both sides of an existing path without actually being contained by that path, so testing the touch points is pretty pointless.
I can't find any "intersection" of paths method.
Any other thoughts on how to accomplish this task?
Well, I did come up with a way to do this. It is imperfect, but I thought others might want to see the technique since this question was upvoted a few times. The technique I used draws all the items to be tested against into a bitmap context and then draws the new segment of the progressing line into another bitmap context. The data in those contexts is compared using bitwise operators and if any overlap is found, a hit is declared.
The idea behind this technique is to test each segment of a newly drawn line against all the previously drawn lines and even against earlier pieces of the same line. In other words, this technique will detect when a line crosses another line and also when it crosses over itself.
A sample app demonstrating the technique is available: LineSample.zip.
The core of hit testing is done in my LineView object. Here are two key methods:
- (CGContextRef)newBitmapContext {
// creating b&w bitmaps to do hit testing
// based on: http://robnapier.net/blog/clipping-cgrect-cgpath-531
// see "Supported Pixel Formats" in Quartz 2D Programming Guide
CGContextRef bitmapContext =
CGBitmapContextCreate(NULL, // data automatically allocated
self.bounds.size.width,
self.bounds.size.height,
8,
self.bounds.size.width,
NULL,
kCGImageAlphaOnly);
CGContextSetShouldAntialias(bitmapContext, NO);
// use CGBitmapContextGetData to get at this data
return bitmapContext;
}
- (BOOL)line:(Line *)line canExtendToPoint:(CGPoint) newPoint {
// Lines are made up of segments that go from node to node. If we want to test for self-crossing, then we can't just test the whole in progress line against the completed line, we actually have to test each segment since one segment of the in progress line may cross another segment of the same line (think of a loop in the line). We also have to avoid checking the first point of the new segment against the last point of the previous segment (which is the same point). Luckily, a line cannot curve back on itself in just one segment (think about it, it takes at least two segments to reach yourself again). This means that we can both test progressive segments and avoid false hits by NOT drawing the last segment of the line into the test! So we will put everything up to the last segment into the hitProgressLayer, we will put the new segment into the segmentLayer, and then we will test for overlap among those two and the hitTestLayer. Any point that is in all three layers will indicate a hit, otherwise we are OK.
if (line.failed) {
// shortcut in case a failed line is retested
return NO;
}
BOOL ok = YES; // thinking positively
// set up a context to hold the new segment and stroke it in
CGContextRef segmentContext = [self newBitmapContext];
CGContextSetLineWidth(segmentContext, 2); // bit thicker to facilitate hits
CGPoint lastPoint = [[[line nodes] lastObject] point];
CGContextMoveToPoint(segmentContext, lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(segmentContext, newPoint.x, newPoint.y);
CGContextStrokePath(segmentContext);
// now we actually test
// based on code from benzado: http://stackoverflow.com/questions/6515885/how-to-do-comparisons-of-bitmaps-in-ios/6515999#6515999
unsigned char *completedData = CGBitmapContextGetData(hitCompletedContext);
unsigned char *progressData = CGBitmapContextGetData(hitProgressContext);
unsigned char *segmentData = CGBitmapContextGetData(segmentContext);
size_t bytesPerRow = CGBitmapContextGetBytesPerRow(segmentContext);
size_t height = CGBitmapContextGetHeight(segmentContext);
size_t len = bytesPerRow * height;
for (int i = 0; i < len; i++) {
if ((completedData[i] | progressData[i]) & segmentData[i]) {
ok = NO;
break;
}
}
CGContextRelease(segmentContext);
if (ok) {
// now that we know we are good to go,
// we will add the last segment onto the hitProgressLayer
int numberOfSegments = [[line nodes] count] - 1;
if (numberOfSegments > 0) {
// but only if there is a segment there!
CGPoint secondToLastPoint = [[[line nodes] objectAtIndex:numberOfSegments-1] point];
CGContextSetLineWidth(hitProgressContext, 1); // but thinner
CGContextMoveToPoint(hitProgressContext, secondToLastPoint.x, secondToLastPoint.y);
CGContextAddLineToPoint(hitProgressContext, lastPoint.x, lastPoint.y);
CGContextStrokePath(hitProgressContext);
}
} else {
line.failed = YES;
[linesFailed addObject:line];
}
return ok;
}
I'd love to hear suggestions or see improvements. For one thing, it would be a lot faster to only check the bounding rect of the new segment instead of the whole view.
Swift 4, answer is based on CGPath Hit Testing - Ole Begemann (2012)
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 tap target 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 bezierPaths = [UIBezierPath]() // containing all lines already drawn
var tappedPaths = [CAShapeLayer]()
#IBAction func tap(_ sender: UITapGestureRecognizer) {
let point = sender.location(in: imageView)
for path in bezierPaths {
// create tapTarget for path
if let target = tapTarget(for: path) {
if target.contains(point) {
tappedPaths.append(layer)
}
}
}
}
fileprivate func tapTarget(for path: UIBezierPath) -> UIBezierPath {
let targetPath = path.copy(strokingWithWidth: path.lineWidth, lineCap: path..lineCapStyle, lineJoin: path..lineJoinStyle, miterLimit: path.miterLimit)
return UIBezierPath.init(cgPath: targetPath)
}