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.
Related
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've created an image in Photoshop to be used as a sprite in Unity and everything works fine while the sprite is scaled at X: 1; Y: 1.
The problem starts when I scale the image up as the border of the image stretches out with the rest of the image. Is there any way to scale an image from its centre or to ignore the image's border when it's scaled?
Here's the example now that I am able to show it:
The rectangle on top is the original image without being scaled up or down and the rectangle on the bottom is scaled at X:5, Y:0.5 but the borders are stretched.
I think that the borders are stretched because it's part of the image and when it's being scaled, the image (including the borders) is just being stretched.
Is there any way to stretch the sprite image but by ignoring the borders?
Are you trying to scale the image and keep the original ratio?
If so, here are the steps:
Hope this helps. Please let me know if you were trying to do something else.
You can use a sliced sprite. The center of the image is scaled to fit the control rectangle but the borders maintain their sizes regardless of the scaling. Check out the Unity doc here: Unity - Manual: Image
I am using fabric.js for html 5 interactive canvas app. If the object scales larger than the canvas, the controls go invisible outside canvas. How to make it visible outside the canvas or is there a way to style those controllers in css.
So, in fabricjs controls are rendered on the canvas, so having controls outside canvas it is not possible.
You can still obtain the effect in this way, this is just a trace.
Make canvas big as 100% of window, or anyway very bigger than drawing area.
Then you can clip the drawing canvas with a rectangle.
If you need borders to define the drawing area you can still put an overlay image as fabricjs allow you.
If you need to have controls near the drawing canvas you will have to position them OVER the non drawing part of the canvas.
This will give you some additional tasks:
When you create some object you have to be sure that they go in the drawing area. If you consider position of objects, you have to consider that a translation has to be applied, because you have absolute position while user will position the object watching a fake top left corner of a drawing area and not the top left corner of the canvas.
The best thing you can do is make a larger canvas, but limit the drawing area to a limited part, like a margin. Not easy because after that you always need to consider the margin when making other calculations, but it is possible.
I have been looking to dynamically scale a image map with coordinates to a div, so when re-sizing a window occurs the map and all coordinates are scaled accordingly.
any suggestions on how to do this?
i think this may work
http://blog.outsharked.com/p/image-map-resizer.html
but with the alternate option of :enter a bounding area and the map will be clipped to within that area.
my question then is how do i establish a bounding area, will it scale dynamically to that whole area?
This jQuery plugin works great for scaling and rescaling image maps on the fly. You can call this once, and it will take care of all image maps on the page. It will even rescale an image map if something happens that changes an image's dimensions.
https://github.com/stowball/jQuery-rwdImageMaps.
If you weren't just using the div to solve the image map scaling problem, you could put a blank image (a completely transparent .gif or .png) in your div with the image map applied to it and set its width and height to 100%.
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