// Function to move imagem, when zoom
function moveImage(object, moviment , image){
}
http://jsfiddle.net/braziel/nWyDE/
Friends, I have a hard time "how to" move an image when zoomed.
In the above code, the first 3 basic functions of the application are running. I carry a picture, I can rotate it left or right and I can also do a Zoom.
When I give zoom the image, I need to move it, but not exceeding the limit of the image.
I am using scale to zoom, but do not know how to move it.
Thanks in advance.
Sorry my bad English.
If what you mean by moving when zooming is that you only manage to scale the image so that it zooms on its top-left corner, and you would like to be able to zoom on a specific point inside the image, then the solution is usually to translate the point to the origin, scale and then translate back.
See this question: Zoom in on a point (using scale and translate)
Friends, this problem was solved another post.
How to add image, image rotate and move the image.
Rotate + Zoom Image
Related
I'm working on a project and I'm currently stuck at the GUI. I'm trying to make a bar like in the picture: a white circle is slowly filled up with beer but the beer image should move up instead of stretching, the image is squared because at every moment it should fill horizontally the white circle, but should not go outside the white circle.
I made the slider fill bottom to top, then assigned the beer image to the Fill area and set Preserv Aspect so it doesn't stretch, but I don't know how to go on. How do I proceed? Thanks in advance for the help.
Is it possible to move the background image in app inventor?
I'm trying to use the call canvas background pixel color block to get the color of different parts of the background. If I can't move the background image, can I use math blocks to change the x and y parts of the call canvas background pixel color block to a variable?
Important Note
I am referring to the image sprite, under the drawings and animations tab.
An image will have coordinates once you put it inside of a canvas. In order to move it, create 2 sliders with 2 balls and 2 narrow canvases that are (seemingly) equal to the ball's diameter. (Place underneath the image, make sure the image isn't too big)
Go into blocks and place the "when dragged" command, and hook up the change in the ball's x/y to the change of the images x/y. (Assuming you know how to make the ball move while you drag it, also very simplistic). This will make the image's movement equal to the ball's movement (1:1 ratio) Depending on how much you want the image to move, your'e going to have to implement a ratio.
When you drag the ball(s), the image should move with it.
I'm using KineticJS to allow users to free hand drawing shapes on canvas and I am successfully able to zoom in/out canvas stage by setting scale.
Challenge:
Am not getting the updated scaled coordinates values after zoom in/out. Any suggestion would be appreciated.
As far as I know, the coordinates don't get scaled, because the only thing you are changing with the 'setScale()' method is the zoom.
So, if you want to know tne coordinates in the scaled stage you probably have to store the scale amount in a variable and when you need a coordinate after scaling, you simply multiply the original shape coordinate with the scale of the stage.
This would be my approach, not sure if there is any other way to do this ;)
If have an image which is 1024x1250 and a canvas element that is 600x800, I can draw the image to the canvas centered such that the canvas is essentially a smaller view port of the larger image. I then want to allow that center point to move, thus creating the illusion that the viewport is viewing a different portion of the image.
Right now I've done this in sort of a hokey way where I redraw the portion of the image I want to see to the canvas, but I get this feeling that this isnt optimal. Is there a way to render the whole image to the canvas and then somehow "transform" my current center point so this view shift happens behind the scenes hopefully in some native layer?
You can add transformations to the context before drawing any image (rotation, scaling, translation...). What you need is the function context.translate(x,y).
Then, you only need to draw your image at (0,0)
For example, to display the bottom right portion of your image:
ctx.translate (-424, -450);
ctx.drawImage (image, 0, 0);
You can check this link https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations to see a lot of examples on context transformation.
I have a bunch of game elements being drawn to the screen with OpenGL-ES and I'd like to be able to render a small rectangle in the bottom corner of the screen that shows, say, what's presently being displayed in the top left quarter of the screen.
In that way it's similar to a picture-in-picture from a tv, only the smaller picture would be showing part of the same thing the bigger picture is showing.
I'm comfortable with scaling in OpenGL-ES, but what I don't know how to do is get the proper rectangle of renderbuffer data and use that chunk as the data for an inset frame buffer for the next render pass. I imagine there's some trick along these lines to do this efficiently.
I've tried re-rendering the game elements at a smaller scale for this inset window and it just seems horribly inefficient when the data is already elsewhere and just needs to be scaled down a bit.
I'm not sure I'm asking this clearly or in the right terms, So any and all illumination is welcome and appreciated - especially examples. Thank you!
Have a look at glCopyTexImage2D. It lets you copy a portion of the framebuffer into a texture. So the order of operation would be:
Draw your scene normally
Bind your picture-in-picture texture
glCopyTexImage2D
Draw a quad with that texture in the bottom corner