I want to draw a line with dynamic width as shown in attached picture. What should be the best approach for this. ?
Updated:
My task is to draw line on finger move. And the line width is changes as speed of swipe is change. both (Line width and finger swipe speed) are directly proportional .
As the image you posted doesn't has any consistent height-width proportion to calculate and change, i doubt this cannot be achieved.
In other solution you can draw a line of fixed pixel say 2 pixel and based on drawn length inflate the width if line till center and then again start deflate from center point to end point.
You need to see the difference between x coordinates otherwise if a sine wave is drawn with high nodes the line width will overlap each other.
Edited : This link might be of your interest then.You can modify it according to your need, its in cocos2d.
There is no direct support for variable thickness curves in iOS (or Mac OS for that matter.) The cocos2d project looks like a good approach.
There is also no support for soft-edged curves who's edges are feathered to transparent. I've thought about implementing a similar approach to the one outlined in the Cocos link using OpenGL. This would be a good application for a vertex shader, since it would take advantage of the parallel vertex processing and vector math available in shaders.
Take a look at this article Smooth Freehand Drawing. It might be helpfull.
You can manipulate with control points of
[path addCurveToPoint:pts[3] controlPoint1:pts[1] controlPoint2:pts[2]];
and fill the area between two bezierPaths. I am not sure if it will work, but you can try if you dont find anything else.
Related
So first some background. Im developing a really simple 2D game, in Delphi 10.3, FMX, which at the bottom of the screen draws a random terrain for each level of the game.
Anyway, the terrain is just some random numbers which are used in Tpathdata and then i use fillpath to draw this 2d "terrain".
I want to check when a "falling" object, a trect for example, intersects with this terrain.
My idea was to get all the points of the tpathdata, every Y position of every X position of the screen width. This way i could easily check when an object intersects with the terrain.
I just cannout figure the way how to do it, or if anyone has any other solution. Id really appreciate any help. Thanks
This is not really a Delphi problem but a math problem.
You should have a math representation of your terrain. The polygon representing the boundary of the terrain. Then you need to use the math to know if a point is inside the polygon. See Wikipedia.
You may also implement it purely graphically using a B/W bitmap of the same resolution of the screen. You set the entire bitmap as white and draw the terrain on the bottom in white. Then checking the color of a pixel in that bitmap you'll know if it is outside of the terrain (black) or inside the terrain (white).
Me and my team are working on an app for a client. We are trying to understand how to achieve this kind of animations (refer only to the circle stroke) :
We tried using a CADisplayLink to set up and change the circle, but it generated non-fluid results.
We couldn't find a way to create a circle from "components" of UIBezierPath and change each of the anchors.
Any suggestions on how to achieve this kind of effect, or how to construct a circle from seperated points, would be highly appricated
Best Regards,
Roi and the team
I suggest using Catmull-Rom splines. Those allow you to create smooth curves using only points that are on the curve, whereas Bezier curves require that you define control points that are not on the curve.
Once you have beginning and ending CGPaths its pretty easy to create a CAAnimation of the path from it's starting to it's ending state (although animating change to a CGPath only works correctly if the starting and ending paths in the animation have the same number and type of points.)
You could probably also use Bezier curves, but you would need to generate the control points for the circle and it's distorted shape.
Check out this sample app that uses Catmull-Rom splines to create a distorted circle shape:
http://wareto.com/animating-shapes-using-cashapelayer-and-cabasicanimation
(Written in Objective-C, but the technique is the same in Swift.)
A Catmull-Rom spline with 8 control points evenly spaced around a circle where the distance from the center of each control points is varied by ± r/12 seems about right:
There a is an ellipse on the picture,just as following.
I have got the points of the contour by using opencv. But you can see the pictrue,because the resolution is low, there is a straight line on the contour.How can i fit it into curve like the blue line?
One Of the method to solve your problem is to vectorize your shape (moving from simple intensity space to vectors space).
I am not aware of the state-of-art in this field. However, from school information, I can suggest this solution.
Bezier curves, you can try to model your shape using simple bezier curve.This is not a hard operation you can google for dozen of them. Then, you can resizing it as much as you want after that you may render it to simple image.
Be aware that you may also Splines instead of Bezier.
Another method would be more simple but less efficient. Since you mentioned OpenCV, you can apply the cv::fitEllipse on the points. Be aware that this will return a RotatedRect which contains the ellipse. You can infer your ellipse simply like this:
Center = Center of RotatedRect.
Longest Radius = The Line which pass from the center and intersect with the two small sides of the RotatedRect.
Smallest Radius = The Line which pass from the center and intersect with the two long sides of the RotatedRect.
After you got your Ellipse Parameters, You can resize it as you want then just repaint it in the size you want using cv::ellipse.
I know that this is a pseudo answer. However, I think every thing is easy to apply. If you faced any problem implementing it, just give me a comment.
I would like to set the width of a line that I'm drawing in Metal. I can set the size of a point with point_size as explained here:
https://developer.apple.com/library/prerelease/ios/documentation/Metal/Reference/MTLRenderCommandEncoder_Ref/index.html
But, I'm not sure how it works with lines.
Short answer would be there is no way to control line width in the same way as a point size in Metal. Even in OpenGL graphics API, the function to do this (which used to exist as gllinewidth function) is now deprecated.
An option would be to draw the line as a quad (a box), with two triangles. This would let you control the width of the line.
If you want to stick to the line primitive itself, for some particular reason, the equivalent OpenGL question has been asked on StackOverflow already as seen here. The shader can be simple translated to Metal shading API.
If you're dead set on using lines instead of drawing a 2D box with two rectangles you can draw multiple lines next to each other. You can do that by drawing the same two vertices multiple times with one drawPrimitives call, just increase the instanceCount to simulate the thickness and then in your vertex shader function you could use your vertex_id and a modulus operation or some other type of logic to translate the position of the line to simulate thickness. This will probably be a lot easier than trying to do something fancy in a fragment shader.
If you are drawing multiple lines, multiply your instanceCount by the thickness you want and adjust your vertex shader function logic to place those additional lines next to each other.
I experimented with this and found this to be a pretty cumbersome process. As you need additional math to position the extra lines to thicken correctly. For example if you're drawing a horizontal line and want to increase thickness by two you'd want to modify the y value, but if it's vertical you'd want to modify the x. Drawing at an angle gets more complicated. You'll also run into issues trying to match lengths with widths if you're attempting to draw shapes.
I think it's much better to just draw two triangles to make a rectangle to fake a line. The math will be much easier and simpler to understand.
In Geometry, Euclid's lines do not have any width, they only have length, the width they get during drawing is simply for representation. So while I think lines may be good for debugging and development, like for displaying vectors or creating a grid to see scale, they're not what you want if you're trying to style them to present them to users. In that case it's the wrong tool for the job.
I have this idea of transforming a straight line into a circle but the offset of a cell drag in a table view.
As I drag the cell, I want the line to curve into a circle around an image.
I've included a picture below to help demonstrate different states with different drag offsets.
Im not sure where to start, was thinking of maybe using UIBezierPath to draw but not sure if that's the best solution.
If you want it to animate then you have your work cut out for you.
Core Animation of curves is based on CGPath objects, which is the underlying Core Foundation class behind UIBezierPath.
The secret to making a curve animate from one shape to another is to use the same number and type of control points. You won't be able to use any of the standard arc or oval shortcuts (which generate more complex bezier curves that look like arcs.)
Instead, you'll have to build an approximation of a circle piecewise out of a linked series of cubic bezier curves. You should be able to get fairly close with 4 linked cubic bezier curves who's endpoints line are at the N/S/E/W compass points of a circle, and the intermediate control points are spaced evenly outside the circle. A couple of years ago I looked up an article on the net for approximating a circle using Bezier points. I would suggest doing some searching on that.
Alternately, I guess you could generate a circle bezier curve using one of the CGPath or UIBezier shortcuts, then deconstruct the resulting path into the primitives that make it up. Erica Sadun's outstanding iOS Developer's Cookbook series includes a recipe that shows how to deconstruct a UIBezier path into it's primitives.
Once you have a set of control points for a circle, you would need to re-map them into control points that make your line. (A Bezier curve always passes through it's beginning and end points, and if you put the inner 2 control points of a Cubic Bezier on a line, it will turn the curve into a line.)
Now you have 2 shapes made up of the same number of bezier curves and the same number of control points: A circle and a line. You can transform the line into the circle or the circle into the line by moving each of the control points to different x/y coordinates.
Then you might be able to apply a linear interpolation between the starting and ending coordinates of your control points. Use the user's drag of the table view to generate a value from 0 to 1, and apply that to your interpolated control point values (at 0.0, your control points would be at their "straight line" position and your curve would draw as a straight line. At 1.0, they'd be at their circle position, and your curve would draw as a circle. At points between, they'd be a fraction of the way between their beginning and ending positions, and you'd get a shape that was between a line and a circle.
Once you have figured out how to generate the control points to create a curve that moves smoothly from a straight line to a circle, you are ready to tackle doing it using Core Animation and a CAShapeLayer.
If that makes sense then you can probably figure out how to do this. If you have no idea what I am talking about they you are probably in over your head.
(I'm a senior Cocoa/iOS developer. I've done a lot of Core Animation and it would probably take me 3 or 4 hours to get what you are after to work, once I had the circle bezier control points to start from.)
Come to think of it, it would probably be a lot simpler to use UIView keyframe animation. That lets you specify an array of control points that ALL lie on the desired curve, and generates a smooth curve from those points.. Best yet, it is a UIView animation, which is a heck of a lot easier to use than CAAnimation.
Take a look at my demo project RandomBlobs on github. That should give you a head start on using UIView keyframe animation. The method you want is called animateKeyframesWithDuration:delay:options:animations:completion:.
The down-side of point-based keyframe animation is that sometimes the curve you get has "kinks" or loops in it that you don't expect or want. You have to avoid sharp bends. In sketching it out, though, I think a line-to-circle transition might work with keyframe view animation.