I'm trying to understand why i'm seeing only one of mine CGPathAddArc.
Code :
var r: CGRect = self.myView.bounds
var lay: CAShapeLayer = CAShapeLayer()
var path: CGMutablePathRef = CGPathCreateMutable()
CGPathAddArc(path, nil, 30, 30, 30, 0, (360 * CGFloat(M_PI))/180, true )
CGPathAddArc(path, nil, 70, 30, 30, 0, (360 * CGFloat(M_PI))/180, true )
CGPathAddRect(path, nil, r2)
CGPathAddRect(path, nil, r)
lay.path = path
lay.fillRule = kCAFillRuleEvenOdd
self.myView.layer.mask = lay
result :
Any suggestions? Thanks!
If you push down the command key and click on CGPathAddArc function, you will see documentation.
/* Note that using values very near 2π can be problematic. For example,
setting `startAngle' to 0, `endAngle' to 2π, and `clockwise' to true will
draw nothing. (It's easy to see this by considering, instead of 0 and 2π,
the values ε and 2π - ε, where ε is very small.) Due to round-off error,
however, it's possible that passing the value `2 * M_PI' to approximate
2π will numerically equal to 2π + δ, for some small δ; this will cause a
full circle to be drawn.
If you want a full circle to be drawn clockwise, you should set
`startAngle' to 2π, `endAngle' to 0, and `clockwise' to true. This avoids
the instability problems discussed above. */
Setting startAngle to 0, endAngle to 2π, and clockwise to true will
draw nothing. If you want a full circle to be drawn clockwise, you should set
startAngle to 2π, endAngle to 0, and clockwise to true. So that you can see all circles.
What you need to do is debug. How? Well, when in doubt, your first step should be to simplify. In this case, you should start by testing your code outside the context of a mask and a fill rule. When you do, you'll see that the arcs are in fact both present. I ran this reduced version of your code:
let lay = CAShapeLayer()
lay.frame = CGRectMake(20,20,400,400)
let path = CGPathCreateMutable()
CGPathAddArc(path, nil, 30, 30, 30, 0,
(360 * CGFloat(M_PI))/180, true)
CGPathAddArc(path, nil, 70, 30, 30, 0,
(360 * CGFloat(M_PI))/180, true)
lay.path = path
self.view.layer.addSublayer(lay)
And this is what I got:
As you can see, both arcs are present. So your results must be due to some complication beyond the drawing of the arcs.
If we add the fill rule...
lay.fillRule = kCAFillRuleEvenOdd
...we get this:
And if we introduce the mask element...
// self.view.layer.addSublayer(lay)
self.view.layer.mask = lay
...we get this:
Thus, using basic tests, you should be able to convince yourself of what this part of your code does. You can now introduce more and more of your actual code until you start getting undesirable results, and then you'll know what's causing the problem.
Related
I've watched this WWDC session as well as its sample project: https://developer.apple.com/documentation/pencilkit/inspecting_modifying_and_constructing_pencilkit_drawings
However, when I try to plot CGPoints on my drawing canvas, nothing shows up.
Here's my setup:
var points: [CGPoint] = []
(500...1000).forEach { x in
(500...1000).forEach { y in
points.append(CGPoint(x: x, y: y))
}
}
let strokePoints = points.map {
PKStrokePoint(location: $0, timeOffset: 0, size: CGSize(uniform: 1), opacity: 2, force: 1, azimuth: 1, altitude: 1)
}
let strokePath = PKStrokePath(controlPoints: strokePoints, creationDate: Date())
let stroke = PKStroke(ink: PKInk(.pen, color: .systemGreen), path: strokePath)
canvasView.drawing = PKDrawing(strokes: [ stroke ])
I figured that the problem was on the size of my stroke. This will work:
PKStrokePoint(location: point, timeOffset: 0, size: CGSize(uniform: 3), opacity: 1, force: 0, azimuth: 0, altitude: 0)
Note that it must be at least 3. If it's 1, it's invisible, if it's 2 it's semi-transparent. This doesn't seem to be related to the screen's scale (my iPad Pro's UIScreen.main.scale = 2.0) so I just hardcoded it at 3, to represent a single pixel.
To achieve this result, I drew a single pixel on the screen using the pencil and logged its content, which showed me these parameters:
▿ PencilKit.PKStrokePoint
- strokePoint: <PKStrokePoint: 0x600001ad8f60 location={445, 333.5} timeOffset=0.000000 size={3.084399938583374, 3.084399938583374} opacity=0.999985 azimuth=-3.141593 force=0.000000 altitude=1.570796> #0
- super: NSObject
So then I played around with those values (for size, opacity, azimuth, force and altitude), and figured that none of those except the size and opacity matter. That's why I set them as all as zero values in my code.
I am trying to create a simple line graph which is being updated live. Some kind of seismograph .
I was thinking about UIBezierPath , by only moving a point on the y-axis according to an input var, I can create a line moving on the time axis.
The problem is that you have to "push" the previous points to free up space for the new ones.(so the graph goes from left to right)
Can anybody help with some direction ?
var myBezier = UIBezierPath()
myBezier.moveToPoint(CGPoint(x: 0, y: 0))
myBezier.addLineToPoint(CGPoint(x: 100, y: 0))
myBezier.addLineToPoint(CGPoint(x: 50, y: 100))
myBezier.closePath()
UIColor.blackColor().setStroke()
myBezier.stroke()
You're correct: you need to push the previous points. Either divide the total width of the graph so it becomes increasingly scaled but retains all data, or drop the first point each time you add a new one to the end. You'll need to store an array of these points and recreate the path each time. Something like:
//Given...
let graphWidth: CGFloat = 50
let graphHeight: CGFloat = 20
var values: [CGFloat] = [0, 4, 3, 2, 6]
//Here's how you make your curve...
var myBezier = UIBezierPath()
myBezier.moveToPoint(CGPoint(x: 0, y: values.first!))
for (index, value) in values.enumerated() {
let point = CGPoint(x: CGFloat(index)/CGFloat(values.count) * graphWidth, y: value/values.max()! * graphHeight)
myBezier.addLineToPoint(point)
}
UIColor.blackColor().setStroke()
myBezier.stroke()
//And here's how you'd add a point...
values.removeFirst() //do this if you want to scroll rather than squish
values.append(8)
I wanted to create a rounded cross by combining two rounded rectangles with CGPathAddRoundedRect. The problem is the area where rects intersect is empty, but I would like it to be filled. (see image of the problem)
I'm also using SpriteKit SKShapeNode to draw on scene. Here is Swift code I'm using:
backgroundColor = UIColor.orangeColor()
let width: CGFloat = 302
let height: CGFloat = 92
let path = CGPathCreateMutable()
CGPathAddRoundedRect(path, nil, CGRectMake((size.width-width)/2, (size.height-height)/2, width, height), height/2, height/2)
CGPathAddRoundedRect(path, nil, CGRectMake((size.width-height)/2, (size.height-width)/2, height, width), height/2, height/2)
CGPathCloseSubpath(path)
let cross = SKShapeNode(path: path)
cross.fillColor = UIColor.whiteColor()
addChild(cross)
Any ideas how to make intersecting area filled? I know I could create two separate shape nodes ... but I just want to learn how to do that with combining CGPaths directly.
I'm trying to draw along an UIBezierPath to a view. The weird thing is, it starts with an offset of 50% of the view.
The grey part is the view and the lines are what I'm drawing.
Here is my code:
lineLayer.bounds = CGRectMake(0, 0, self.bounds.width, self.bounds.height);
lineLayer.strokeColor = UIColor.blackColor().CGColor
lineLayer.lineDashPattern = [3, 2, 1, 2, 1, 2, 1, 2, 1, 2]
lineLayer.lineWidth = lineLayer.bounds.height
var linePath = UIBezierPath()
linePath.moveToPoint(CGPointMake(0, CGRectGetMaxY(lineLayer.bounds)))
linePath.addLineToPoint(CGPointMake(CGRectGetMaxX(lineLayer.bounds), CGRectGetMaxY(lineLayer.bounds)))
lineLayer.path = linePath.CGPath;
Does anyone know what I'm doing wrong?
Thanks
EDIT: I've added a call to layoutSubview and it moved the offset from x to y:
Okay my error was, that I thought the UIBezierPath describes the edge of the drawing. Instead it describes the center. So I've changed my code to:
linePath.moveToPoint(CGPointMake(0, CGRectGetMidY(lineLayer.bounds)))
linePath.addLineToPoint(CGPointMake(CGRectGetMaxX(lineLayer.bounds), CGRectGetMidY(lineLayer.bounds)))
and it works
I use the following code to draw an arc
double radius = 358.40001058578491;
startAngle = 0.13541347644783652;
double center_x= 684;
double center_y = 440;
std::complex<double> start1( std::polar(radius,startAngle) );
CGPoint targetStart1 = CGPointMake(start1.real() + center_x, start1.imag() +center_y);
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, targetStart1.x, targetStart1.y);
CGPathAddArc(path, NULL, center_x, center_y, radius, startAngle, 0.785, 0 );
CGContextAddPath(context, path);
CGContextSetLineWidth( context, 30 );
CGContextSetStrokeColorWithColor( context, targetColor.CGColor);
CGContextStrokePath(context);
CGPathRelease(path);
If u check it in retina, it looks like this:
My arc is the green arc. I have shown the place that the start angle is with a orange line. As I have shown in the red rectangle, there is an extra thing drawn in the very beginning of the arc. This happens not for all start angles, but only for certain start angles.
Do you have any idea why it happens?
Thanks.
In your original question, you specified a literal starting point that was not quite right and, as a result, Core Graphics will draw a line from that point to the start of the arc. And because that starting point was just a few pixels away from the actual start of the arc, it results in that curious rendering you illustrate in your question.
In your revised question, you're calculating the starting point, but I might suggest calculating it programmatically like so:
CGFloat centerX = 684.0;
CGFloat centerY = 440.0;
CGFloat radius = 360.0;
CGFloat startAngle = 0.135;
CGFloat endAngle = 0.785;
CGFloat startingX = centerX + radius * cosf(startAngle);
CGFloat startingY = centerY + radius * sinf(startAngle);
CGContextMoveToPoint(context, startingX, startingY);
CGContextAddArc(context, centerX, centerY, radius, startAngle, endAngle, 0);
CGContextSetLineWidth(context, 30);
CGContextSetStrokeColorWithColor(context, targetColor.CGColor);
CGContextStrokePath(context);
When I calculated it this way, there was no rounding errors that resulted in the artifact illustrated in your original question.
Note, if you're not drawing anything before the arc, you can just omit the CGContextMoveToPoint call altogether. You only need that "move to point" call if you've drawn something before the arc and don't want the path connecting from that CGContextGetPathCurrentPoint to the start of the arc.