Here is a picture:
Is there a way to expand layer (the area where you draw), to be larger.
At first i thought that (0,0) is the center, but it seems that it is a starting point for layer.
I was planning to draw content at (0,0) then to translate it as necessary.
Or, must i draw whatever i have in center of layer (width/2, height/2) and then translate as necessary?
EDIT_01:
The offset of layer is made by panning gesture recognizer. That is on purpose, since app must have panning of content.
Answers
At first i thought that (0,0) is the center, but it seems that it is a starting point for layer
(0,0) in iOS begins at the top left of the layer, and gets greater going right and down. In OS X, (0,0) begins in the bottom left, and gets greater going right and up.
Is there a way to expand layer (the area where you draw), to be larger
The question I have is, do you need to? This can have performance issues, as you're rendering and storing drawing data when you don't really need to, causing more memory to be used. It looks like your layer is filling the screen correctly, it's just translated incorrectly. If you move it to the correct place, you shouldn't need to expand the layer off screen.
This doesn't mean you can't translate other layers off screen, of course you can. But really you don't want to expand the size of your drawing area to expand off screen.
Must i draw whatever i have in center of layer (width/2, height/2) and then translate as necessary?
If you want them drawn into the center, then yes. You can create your own method to translate your own co-ordinate space into the co-ordinate space of the layer, to make this easier for you.
Documentation
I'd suggest reading this, to get a greater grasp of the geometry workings of CALayer:
https://developer.apple.com/library/ios/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/Layers.html#//apple_ref/doc/uid/TP40006082-SW1
...and this to get an understanding of drawing techniques:
https://developer.apple.com/library/ios/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_layers/dq_layers.html
Related
The problem
I would like to have an area inside love2d in which movable objects are drawn. The movement of the objects is not restricted by the area boundries but drawing is. Think of it as looking outside through a window. For example: a blue rectangle in an area, if it moves to the side its drawing should be truncated to the boundries of the area.
Before moving:
After moving (wrong):
After moving (right):
Restrictions and assumptions
You can assume the area is rectangular.
The object to draw inside can be anything: polygon, image or text.
The area covers anything behind it (as if it has its own background)
Objects not 'belonging' to the area should be drawn as usual.
Atempted solutions
I know I could stop drawing objects as soon as they 'touch' the boundries of the area, but that would cause them to suddenly disappear and then appear when they are wholly inside the area. I guess it takes some sort of layering system but I have no clue on how to include that in love2d.
I think you are looking for love.graphics.setScissor.
The scissor limits the drawing area to a specified rectangle.
Calling the function without any arguments (i.e. love.graphics.setScissor()) disables scissor.
Example:
function love.draw ()
-- sets the drawing area to the top left quarter of the screen
local width, height = love.graphics.getDimensions()
love.graphics.setScissor(0, 0, width / 2, height / 2)
-- code to draw things
love.graphics.setScissor()
end
I have the following problem: I'm scanning a QR Code with AVFoundation. This works quite well and I can also create a border around the code by adding a subview and set the frame attribute by subview.frame = qrCodeObject.bounds. This only has the problem that the border is only a rectangle and dismisses the perspective of the QR code.
I know that the qrCodeObject has a property corners which incorporates the top right, top left, bottom right and bottom left points of the QR code detected.
My question is now: how can I apply those corner points to the "border" view to make this border to have the same perspective as the QR code? Or in other words: how to "transform" the view according to the corner points?
Thanks a lot in advance!
UPDATE:
Here you can see the problem: the red box is a UIView, having it's frame property set to the QR codes bounds property. This misses perspective. I would like to transform the UIView (the red box) to following the corners property of the QR code, which includes the top right, top left, bottom right and bottom left points (CGPoint) of the QR code. It is important to apply this to a UIView, because I later want to apply it to an ImageView. Also a mask is not usable, as it just hides part of the view, but does not stretch or transform the content of the view.
I found a solution: AGGeometryKit did the trick: https://github.com/hfossli/AGGeometryKit/
Thanks everybody for helping!
You can't transform a CGRect that way, as far as I know. (At least I'm unaware of any framework that can do that kind of image processing.)
What you can do is to draw a polygon using the points of the qrCodeObject.
In drawRect of your UIView, change use CGContext and CGPath to draw the path you'd like.
You want your drawing UIView to be the same size as the one showing the QR code so that you don't have to translate the points onto a second coordinate space.
This answer has directions if you need more guidance on how to do that.
Ok, the problem you are facing is that a CGRect can only represent a rectangle that is not tilted or distorted. What you are dealing with is an image that has different kinds of perspective distortion.
I haven't tried to do this, but it sounds like AVFoundation gives you 4 CGPoint objects for a reason. You need to draw those 4 CGPoints using a UIBezierPath rather than trying to draw a CGRect. Simply create a bezier path that moves to the first point, then draws lines to each subsequent point, and finally, back to the first point. That will give you a quadrilateral that takes into account the distortion of your QR code.
CATransform3DRotate could be your friend, here.
https://guides.codepath.com/ios/Using-Perspective-Transforms might be a good starting point.
I want to achieve the following by code:
Based on a circular path or arc, I need to place other views evenly around the perimeter.
Is this possible without hardcoding the frames? If so, how?
In addition to that, can I make a view to follow a path ? if so, how?
Update:
I found this answer helpful, but it seems to use a lot of code though...
Place images along a bezier path
It's easy. A view is a layer.
A layer is positioned by its anchor point. So place the layer's anchor point at the center of the circular path, and define the anchor point at a sufficient size to move the layer away from the center to lie on the desired radius.
Moreover, a layer is rotated around around its anchor point, so now just apply a rotation transform in an increment of nths of a circle, where, n is the number of views.
As you can see, I can easily draw your sub-circles evenly spaced out, given any number of desired sub-circles:
I have been searching from last two days on internet, I have checked many source codes on net but none of them has provided the result I want.
The image rotation would have perspective but still there would be no changes in the heights of both left and right sides of an image.
I want to set image inside the laptop screen
Please help me out, Thanks.
So you want to 2D pespective drawing of a laptop screen (on an iOS device?) and put a 2D image on that screen, but with the image transformed so its perspective looks correct on the laptop screen, right?
What you need to do is to add an image view on top of your laptop image view. Lets call it laptopScreenImageView.
Then apply a CATransform3D to that the laptopScreenImageView's layer.
The trick to get 3D perspective out of a CALayer is to modify the .m34 value of the transform. Typically you set the .m34 value to a very small negative number, somewhere around -1/200 to -1/500 (the denominator in the fraction is the z coordinate of the "eye position" for viewing the perspective image, in pixels, or how many pixels "above" the image the viewer's eye should seem to be. I don't fully understand it, to be honest. I fiddle with the .m34 value until I get something that looks right.)
Alternately you could try adding a CATransformLayer to your laptop image view's layer, and then adding a CALayer containing your image as a sublayer of the CATransformLayer. I haven't used CATransformLayers before, but the docs say they are supposed to support layers with 3D perspective, giving you the same effect as modifying the .m34 component of a layer's transform.
I'm trying to use paint code to draw a roundrect with different corner radii. I have nearly everything working by drawing two circles and two roundrects. The problem is I can't make one of the roundrects draw at x offset circle radius have width of "frame.width - circle_radius" - the end effect being it keeps aligned to the right hand edge of the frame.
It feels like I should be able to write frame.width - largeCornerRadius in an expression editor but PaintCode objects to the frame reference.
That said, i's beginning to feels like I could write this code quicker by hand :-)
I don't have an answer to my specific stated question but I have discovered a better way to draw my roundrect as four different rects and turning off the roundrects on the "inner corners:
As you'd expect the drawing code is much better and it resizes well with the enclosing frame.
You can also :
use a set of rect, oval or other shapes
select them and "union" to get one bezier curve for the whole shape
selection each point (or a set of points) of the resulting bezier and fix springs on each of them as fixed or fluid from the edge of the surrounding frame.
I see this question is old, but let me show how to achieve this using Springs & Struts.
Let’s use 2 circles and 2 rounded rectangle, each having only one corner rounded, just like you have. Once you draw a Frame around these shapes, their Springs & Struct inspector becomes enabled.
Here you can click each of 6 segments to toggle fixed or flexible dimension for each shape. For Red Circle, make flexible only top and right margin (just like on the image above) and for Blue Circle the opposite margins (bottom and left). Then for both rectangles make flexible size and fixed margins.
For more information, check out our videos, blog, and documentation on this topic.
– PaintCode Support