Re: Swift: Draw a circle with tic marks at it's edge?

[Quincey Morris]

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?

[Eric E. Dolecki]

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?

[Eric E. Dolecki]

[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?

[2551phil]

> 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?

[Quincey Morris]

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?

[Eric E. Dolecki]

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?

[Doug Hill]

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?

[Jens Alfke]

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