Re: Swift: Draw a circle with tic marks at it's edge?
On Jan 19, 2017, at 05:48 , Eric E. Dolecki wrote: > > However, the position of the ticks > is off. Seems like it needs to be moved down 1/2 way and the same to the > right. The position of the ticks is correct as you calculated, since you calculated relative to the view origin, which is at the upper left of the view bounds rect. (If you squint at the image carefully, you can see that it’s correct, showing the first and last ticks, with the rest being off the view to the left and top.) All you need to do is offset the x and y coordinates by the distances to the center of the view. However, your image demonstrates a subtler bug which is something you need to deal with no matter how you end up drawing the view. Note that the visible horizontal tick in your image is clipped to the view bounds, so the line segment appears to be only half of the correct thickness. To get everything drawn properly, your drawing needs to be inset slightly from the edges of the view bounds. You have to ensure that there is sufficient inset to provide for: a. the line thickness, when stroking a path b. the end caps, when stroking a path c. anti-aliasing, when drawing near the edges of the view bounds Considerations such as those are why I suggested earlier as thinking of the drawing geometry as something different to the view geometry. Similar considerations apply to input, when your view is intended to be responsive to touches. If your drawn elements (the parts the user “grabs”) are too close the edge of the view, they can be hard to grab because the initial touch has a good chance of being passed to a different view. Even if you’re using pre-rendered images instead of doing the drawing via bezier paths, you still have to consider the effects of bounds clipping on your drawing and touch interactions. ___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Re: Swift: Draw a circle with tic marks at it's edge?
Okay - Paintcode to the rescue. I made my art in Illustrator, and I can support up to 45 values @ the moment (each segment an 8º rotation). I if/else the hell out of whether or not a line gets stroked based on the number of ticks. At least my artwork for the dial looks good now. Thanks for that suggestion. If I ever need more than 45 values, I'll probably need to revisit this solution, but I should be okay. On Thu, Jan 19, 2017 at 8:48 AM Eric E. Dolecki wrote: > [image: knob.jpg] > > I have this Class that I am testing out. However, the position of the > ticks is off. Seems like it needs to be moved down 1/2 way and the same to > the right. I tried doing this with a shape layer and moving that - but it > didn't change the appearance. Also, it seems like the spacing between ticks > is way off (very far apart). I am looking for a solution to this current > problem, please. > > class Disc: UIView { > > // Defaults. > private var myOuterRadius: CGFloat = 100.0 > private var myInnerRadius: CGFloat = 90.0 > private var myNumberOfTicks: Int = 5 > > override func draw(_ rect: CGRect) > { > let strokeColor = UIColor.black > let tickPath = UIBezierPath() > for i in 0.. let angle = CGFloat(i) * CGFloat(2 * M_PI) / > CGFloat(myNumberOfTicks) > let inner = CGPoint(x: myInnerRadius * cos(angle), y: > myInnerRadius * sin(angle)) > let outer = CGPoint(x: myOuterRadius * cos(angle), y: > myOuterRadius * sin(angle)) > print(angle, inner, outer) > tickPath.move(to: inner) > tickPath.addLine(to: outer) > } > tickPath.close() > tickPath.lineCapStyle = .round > strokeColor.setStroke() > tickPath.lineWidth = 2 > tickPath.stroke() > } > > init(width: CGFloat, numTicks: Int) > { > super.init(frame: CGRect(x: 0, y: 0, width: width, height: width)) > myOuterRadius = width / 2 > myInnerRadius = (width / 2) - 10 > myNumberOfTicks = numTicks > self.backgroundColor = UIColor(netHex: 0xEE) > self.layer.cornerRadius = CGFloat(width / 2) > self.layer.masksToBounds = true > } > > required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has > not been implemented") } > } > ___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Re: Swift: Draw a circle with tic marks at it's edge?
[image: knob.jpg] I have this Class that I am testing out. However, the position of the ticks is off. Seems like it needs to be moved down 1/2 way and the same to the right. I tried doing this with a shape layer and moving that - but it didn't change the appearance. Also, it seems like the spacing between ticks is way off (very far apart). I am looking for a solution to this current problem, please. class Disc: UIView { // Defaults. private var myOuterRadius: CGFloat = 100.0 private var myInnerRadius: CGFloat = 90.0 private var myNumberOfTicks: Int = 5 override func draw(_ rect: CGRect) { let strokeColor = UIColor.black let tickPath = UIBezierPath() for i in 0..___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Re: Swift: Draw a circle with tic marks at it's edge?
> On 19 Jan 2017, at 03:34, Eric E. Dolecki wrote: > > I tried > UIBezierPaths and my code only produced a black background “There’s an app for that” - have a look at PaintCode. https://www.paintcodeapp.com Best Phil ___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Re: Swift: Draw a circle with tic marks at it's edge?
On Jan 18, 2017, at 12:55 , Eric E. Dolecki wrote: > > When one swipes, it will rotate the control and change the value. I'm just > trying to get the drawing correct. Should the dial be a UIView with its > layer cornerRadius set so it's round, and then create a shape layer with my > path and then add that to the dial's sublayer? You’re trying to address a number of separate issues promiscuously, and that’s making a fairly straightforward task seem harder. — You need a custom UIView, and normally that’s going to be rectangular. (The shape of the UIView itself is only an issue if hit testing is an issue.) — You draw the view’s contents in its “draw(_:)” or “-[drawRect:]” method, according to the language. — In your draw method, you construct a UIBezier path, and then stroke that path to make it visible. In your example code, you wouldn't want to fill the path. — You need to add any needed behavior for touching or manipulating the view, when appropriate. This might be done with gesture recognizers, or by overriding the “touchesBegan” family of UIResponder methods. That’s it. Everything else you might do (non-rectangular view, using CoreAnimation, etc) is a refinement you can come back to, if you’re not satisfied by the way the simplistic view appears or behaves. ___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Re: Swift: Draw a circle with tic marks at it's edge?
Yes - and best approach. The number of ticks will always be dynamic. I'm making this control it's own UIView subclass. So when it's created, you supply min value, max value, current value, etc. When one swipes, it will rotate the control and change the value. I'm just trying to get the drawing correct. Should the dial be a UIView with its layer cornerRadius set so it's round, and then create a shape layer with my path and then add that to the dial's sublayer? Not sure, but I am creating my path like this right now... numberOfTics = 5 // I am actually getting this from the init, but it's here for testing. outerRadius = 210 // Same as above, here for testing. innerRadius = 200 // Same as above. path = UIBezierPath() for i in 0.. wrote: > I’m not sure what you’re asking. This is just a circle and a couple of > lines, with some basic trig to compute the endpoints of the lines. Are you > asking how to use the CG graphics APIs? > > —Jens ___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Re: Swift: Draw a circle with tic marks at it's edge?
Hello Eric, There's a number of ways to approach this problem. If you want to render this at runtime yourself, you'll need to learn Core Graphics and figure out how to create paths (e.g. arcs and lines). I'll have to leave it to a Google search or Apple docs for you to figure this out. It's actually pretty easy to do, so check your graphics context, coordinates, and the path, fill, and background colors. Another approach is to render the individual frames of each state ahead of time and use those at runtime. For example, it there were only 10 positions on your knob you could render these positions separately in e.g. Photoshop and when the gesture recognizer sends an event that the user did a rotate gesture, you update an image view with a different pre rendered image. There might also be a way to render one frame of the dial (e.g. the 'Ø' position) and apply a rotate transform. This is dependent on the design you have whether it could be rotated and still look good. Good luck! Doug Hill > On Jan 18, 2017, at 12:34 PM, Eric E. Dolecki wrote: > > [image: Screen Shot 2017-01-18 at 3.28.22 PM.png] > > I have been tasked to create a control. A giant knob that is ticked along > its edge (the number dependent on the minimum & maximum values). Not 360 > degrees, just enough ticks to show the range. It will do other things as > well, but I'm wondering how to approach this. The values will always be > Int. > > I have included a screenshot. The longer dark tick will always show the > current value. I didn't want to paste a lot of code in here, but I tried > UIBezierPaths and my code only produced a black background. Would this be a > ShapeLayer with another sublayer for the ticks? I'll be using > UIGestureRecognizer to control the rotation of the "dial"... > > Eric ___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Re: Swift: Draw a circle with tic marks at it's edge?
I’m not sure what you’re asking. This is just a circle and a couple of lines, with some basic trig to compute the endpoints of the lines. Are you asking how to use the CG graphics APIs? —Jens ___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Swift: Draw a circle with tic marks at it's edge?
[image: Screen Shot 2017-01-18 at 3.28.22 PM.png] I have been tasked to create a control. A giant knob that is ticked along its edge (the number dependent on the minimum & maximum values). Not 360 degrees, just enough ticks to show the range. It will do other things as well, but I'm wondering how to approach this. The values will always be Int. I have included a screenshot. The longer dark tick will always show the current value. I didn't want to paste a lot of code in here, but I tried UIBezierPaths and my code only produced a black background. Would this be a ShapeLayer with another sublayer for the ticks? I'll be using UIGestureRecognizer to control the rotation of the "dial"... Eric ___ Cocoa-dev mailing list (Cocoa-dev@lists.apple.com) Please do not post admin requests or moderator comments to the list. Contact the moderators at cocoa-dev-admins(at)lists.apple.com Help/Unsubscribe/Update your Subscription: https://lists.apple.com/mailman/options/cocoa-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com