currently I am trying to port my old windows phone app to iphone. The UI looks like this:
I want to know how to do the following:
Draw a solid ellipse on a specific position, e.g. at position x = 0, y = 0;
The ellipse change its color upon touch;
Touch another position on screen, the ellipse animated to move to the specific position.
I tried several tutorial on how to override drawRect in UIView, but couldn't get it work, can anyone help provide a simple sample?
Thanks a lot!
Edit: Any sample code is highly appreciated.
There aren't much swift code on the internet and samples are not easy to find...
Animating inside a drawRect is never recommended. Why not just put an UIView on the place where you want it and animate the coordinates of that view?
The UIView could be a custom view responding to touch and then triggering the drawRect with a new color.
The parent view where you place these views on can respond to touches and move the ellipse view to the right position.
Related
I am looking for guidance with how to approach the following animation scenario.
I have UICollectionView with a custom circular UICollectionViewLayout subclassed layout. There are (circular) images around the perimeter of the circle and a 50% larger (circular) image in the center of the circle.
When the user taps one of the perimeter images, I want the tapped on image to move toward the center (becoming 50% bigger) and sort of "connect with" the center image. I then want the two images to float to the top of the view. (The bottom portion of the view will then be a context of things related to the two joined images).
If this makes sense to anyone, I'd really appreciate a starting point of some kind.
By the way, I'm an old developer but new to iOS and developing in Swift (but can read Objective-C).
Thanks!
I solved this using a visual trick. Of course, I'm sure there's a better way.
When one of the perimeter circles is tapped, I transition to a view controller that immediately creates a duplicate of the center circle and the tapped circle in their former locations, making it appear that the other elements disappeared.
I then simultaneously animate the tapped circle to the center and the center image to the top of the view. I enlarge the tapped circle briefly and then animate it to the top of the view next to the center circle restoring the tapped image's original size.
Not elegant but it works.
Here's the scenario I am trying to implement:
I already have a view that can let user draw doodles by touching inside the view directly (like a doodle canvas). This view implements touchesBegan, touchMoved, and touchEnded handlers to draw lines from touch event parameters.
Now instead of that, I want user to be able to drag and move another UIView on this canvas view and can still draw lines just like they touch directly. For example, user can drag a pen image view on the canvas view to draw pen-style lines.
In this case, how can I transfer the movement of this pen image view to the canvas so it recognize it? One more question: if I want this canvas view to only recognize movements of drag other views rather than touching directly, what I should do?
(Sorry that this question is little too general, just want to get some pointer of it)... Thanks!
A better way to look at the problem is
How can I transfer movement on the canvas into the location of a pen
image view?
That's easy. You already have all the code that keeps track of movement in the canvas (touchesBegan, touchesMoved, touchesEnded), so all you need to do is change to center property of the pen view to track the movement in the canvas. (Obviously, you'll need to apply small X and Y offsets to put the center of the pen view at the correct location).
The only non-obvious detail that you need to be aware of is that the pen view must have userInteractionEnabled set to NO. That way, the pen view won't interfere with touches reaching the canvas view.
Note that UIImageView has user interaction disabled by default, so you don't need to do anything if the pen view is a UIImageView. However, if you're using a generic UIView to display the pen, then you need to disable user interaction in storyboard under the Attributes inspector or disable it in code, e.g. in viewDidLoad.
I have a CCScrollLayer that i would like to set up multiple CCLayers inside of it to swipe pages back and fourth. Some of the content expands over the page CCLayer and into the next page, so while swiping you can see things from the previous page pushing onto the next one. What i would like to achieve is similar to the UIView function where it clips to the bounds, where you will not see anything outside the contentSize of the layer. Does anyone know how to go about doing this? I would like the size of the page to being the size of the devices screen. I've tried doing this but it doesn't give the desired result:
kmGLPushMatrix();
glEnable(GL_SCISSOR_TEST);
CGPoint startingPoint = ccp(0,0);
glScissor(0,0,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.height);
glDisable(GL_SCISSOR_TEST);
kmGLPopMatrix();
Any help would be awesome!
Have you looked at a CCClippingNode (cocos2d version 2.+) ... Visit at the visit method to get some inspiration. Here, from the doc:
/** CCClippingNode is a subclass of CCNode.
It draws its content (childs) clipped using a stencil.
The stencil is an other CCNode that will not be drawn.
The clipping is done using the alpha part of the stencil (adjusted with an alphaThreshold).
*/
I have a requirement to draw a line on a UIView in IOS with OpenGL ES. But the line that is drawn could be able to move anywhere on the view when it is touched and dragged. Simply the user can re-position the line on the screen. I have no idea how this can be implemented. The line will be drawn with OpenGL ES.
I request all your helps and suggestions regarding this.
The solution is to use a second transparent view positioned over the OpenGL view, which acts as a proxy to your line.
Create a clear view (or a view with 0.0001 opacity) and add gesture recognizers to it. Initially place that view (say sized to 44 x 320), and centered over your line (I'm assuming its horizontal). When the user drags the clear view around, post the new position you want your line to appear in within the OpenGL view then tell it to refresh.
I seem to recall (but am unsure) if you can use gesture recognizers with completely clear views - you may need to make the view slightly opaque (but no visibly so) to get touches, but again just not sure.
I have a UIView subclass object that animates and therefore changes its position over time as a subview in my UIViewController's view. Actually my moving UIView subclass is just an image of a ball and it's moving as if it was hanging down from my devices screens top border. But to be a real pendulum I'd like to also draw a line between my ball and the CGPoint it hangs down from on top of my screen.
My idea was to just draw a line every time the UIView changes its position. But as the moving is done within an iOS API (I'm just calling something like [myBallView swing]) I can't do this at the same place the movement is happening. I'm actually not animating the view myself.
The only solution I have in my mind to solve my issue is pretty bad: subclassing UIView, adding it as a superview to my moving UIView and adding a line every time drawRect is called. But I'm not even sure drawRect is going to be called there. Either way, there must be a better solution for this.
Does anyone know a good solution to my problem?
Making a custom subclass of UIView as the superview is reasonable.
However, rather than drawing the line yourself, I would suggest implementing +layerClass in your custom view, and making the backing layer a CAShapeLayer.
Then you can create a CGPath in the view's shape layer that is a line, and manipulate the start and end points of the line when your other view's center moves. Shape layers are designed to draw as part of the screen update process, and you could even make the change animate by changing the endpoints of the path with a CABasicAnimation.