I'm learning my way through UIBezierPaths by creating a table from scratch, and having individual cells filled with different colours.
This is a custom object I'm building which is contained in a subclassed UIView.
At the moment, I'm constructing this in this order:
'Cell' fill colours
Column lines
Row lines
Outer box (rounded rect)
As the picture suggests, I'm having trouble getting rid of the sharp corner of the cell fill outside the orange rounded rectangle.
Can anyone point me in the right direction to get rid of these?
Cheers! :)
At the beginning of your drawing code you should add the outer rounded rect path to the clipping path using its addClip method. That way nothing will get drawn that is outside this path.
Related
Using Swift methods touchBegan, touchMoved and touchEnded I save the touch points and than I draw a line using UIGraphicsGetCurrentContext() with methods beginPath(), move(to: Point), addLine(to: Point) and strokePath().
This line is repeated on 4 quadrants plus their negative values, therefore 8 lines are drawn.
Here is an example:
Example image
I save this drawing as an Image when the user taps the tick (Done green button at top-right) for later manipulations.
I wonder if it's possible to create e closed path/shape with white pixels enclosed by the black lines. I want to fill the white area with custom color when the user touches inside it.
The shape is created by user input and I have no idea how it would look like.
Would be thankful to whoever finds the time to give it's contribute.
Thank you
Maybe what you want is the "Flood Fill" algorithm, please see the article.
What I want is to draw a small rectangle inside an CPTAxisLabel to display a colour, what I have all ready tried is to draw a rectangle in a layer and add it as sublayer, but it stretches the small sublayer all over the label and the text isn`t visible anymore, I also tried to make an CPTLegend and add it to the label but I did not found any method to position it in the right side of the label, it just sits in the center, I tried changing the legends position, frame, bounds, padding and nothing. Does anyone know a better way of adding a rectangle shape in an CPTAxisLabel and also keep the text in the label ?
I assume you're using a CPTTextLayer for the label's contentLayer. Use an image fill on the text layer that contains your rectangle. Make it a stretchable image and set the stretchable area to the right of the rectangle. Set the paddingLeft on the text layer to leave room for the rectangle to the left of the label text.
After some long researches I found issue 266 in core-plot and it seems to be the problem I have with positioning a sublayer inside a CPTAxisLabel... I will keep waiting for a fix, but I don`t know if it will be solved soon.
I’ve got a CAShapeLayer with rounded corners and a dashed border that display line dashes. However, the dashes are not aligned to the corners. Is there a way to do this?
Here’s a diagram showing the kind of pattern I want (with the arrow pointing to it):
Try adjusting the 'phase' via https://developer.apple.com/library/ios/documentation/uikit/reference/UIBezierPath_class/Reference/Reference.html#//apple_ref/occ/instm/UIBezierPath/setLineDash:count:phase:
I have a custom table view and want it to look like this...
(source: pulsewraps.co.uk)
The image is loaded via async and the two lines come from two different arrays. I can get all the data in fine I just don't know how to lay it out.
I want:
the black gradient to overlay the image
the two lines of text to be within the black gradient box
the image to fill the table row to cover it and keep it's aspect ratio
the black gradient box to be pinned/constrained to the bottom of the image so that is either line of text is larger than two lines it covers more of the image and doesn't drop below it.
I fill the table data in a loop according to the number of records in my array which is populated by json.
I have managed to do the layout in android but can't get my head around ios.
Any help much appreciated.
If you're using autolayout, you'll want to constrain the labels to the bottom and to each other. Then put the gradient view behind the labels and constrain the top of the gradient to the top of the top label.
You'll have to handle drawing the gradient yourself, either use an image in an image view and set it to scale to fill, or subclass UIView and add a little bit of code to drawRect: The first is probably easier, the second will produce a more uniform gradient if it has to be scaled.
Is ShapeRenderer class has the ability to do this,I would like to create boundaries for a custom object (such as a rectangle with rounded corners) and then fill it.And after that some text on that filled rounded box.
shapeRenderer.begin(ShapeType.Filled);
shapeRenderer.setColor(Color.RED);
//shapeRenderer.line(...);
shapeRenderer.curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, segments);
shapeRenderer.line(...);
shapeRenderer.curve(...);
shapeRenderer.line(...);
shapeRenderer.curve(...);
shapeRenderer.line(...);
shapeRenderer.curve(...);
shapeRenderer.setColor(Color.BLACK);
shapeRenderer.fill();
shapeRenderer.end();
Any suggestion to do it in libgdx.
As Lestat said, you can use Scene2d.
Whether you are using Scene2d or not, a NinePatch would probably be suitable if you want to draw a rounded rectangle that scales well (check this link).
If you want to be able to set the color of your image/control, you can use NinePatch.setColor().
Here are two example scenarios regarding colors:
You will always have a black stroke/outline, and an arbitrary fill. In this case make the original image have black stroke/outline and white interior. When you 'tint' the image using NinePatch.setColor(), the stroke/outline will be unaffected and will remain black, while the interior (fill) will be the same as the color provide to the mentioned method.
You have arbitrary fill and arbitrary stroke. In this case you need 2 separate original images. First one would contain the 'fill' and would be completely white. Second one would contain the 'stroke' in white color and would be transparent inside. When drawing you would draw first the fill with its tint and then the stroke with its tint and that's all.
If for some reason you needed different corner curve radii, you would probably need separate images (or image pairs) for each radius to get the best result.