I am using jsPDF to create a PDF from existing objects in my canvas. Thus I have the coordinates and the rotation angle of my objects, I want to then add to my PDF. However, every image doesn't rotate around its own center, thus it changes the coordinates drastically.
var doc = new jsPDF('p', 'mm', 'a3');
doc.addImage(image, 'PNG', 100, 100, 52.916667, 52.916667, null, null, 45);
doc.save('a3.pdf');
Can somebody help me rotate the image around its own center?
Here is a jsFiddle
https://jsfiddle.net/bx0ucszo/6/
I have the same Issue, You can solve it by playing with the degrees in X and Y for the position.
Meaning that if when you rotate your img 45 degrees it descends some pixels on Y, my solution was to put a negative value for Y, for example -100 instead of 100
Hope it's usefull for you
Related
Hi stackoverflow geniuses. I'm converting three js mesh positions to html5 canvas positions. I'm able to convert vector3 position to canvas position. My problem is converting mesh rotation to canvas rotation.
What I did is:
ctx.rotate(rotation._y);
ctx.rect( 0, 0, width,height);
But It does not work. What's the proper way to do it?
thanks
EDIT:
I think the rotation for mesh object starts at center point so what I did is to tranlate first to the center point then do a rotate which works.
this.context.translate( cx, cy );
this.context.rotate(item.rotation._y);
Use the THREE.CSSRenderer if you want to render Dom stuff using the 3d scene graph.
I have a bunch of png map tiles that I am trying to stitch together on a canvas element.
jsFiddle
I am making a 10x10 tile with a counter from 0 to 99 (id) to keep track of where I'm up to. This is the line that plots the image:
ctx.drawImage(this, id%10*imgWidth, Math.floor(id/10)*imgHeight, imgWidth, imgHeight);
Where id is some number from 0 to 99, imgWidth is the width of each tile and imgHeight is the height of each tile.
I am reasonably confident that should work, but it appears to just plot one stretched tile on the canvas instead of all 100. When I check the console for what was loaded, the images appear to be the correct shape and contents for each tile. The just don't seem to have been placed on the canvas. Does anyone have any ideas?
One reason to not use jQuery with canvas:
$('canvas').width(imgWidth*10).height(imgHeight*10);
:) as this refers to the element size, not the bitmap. I would suggest using instead:
myCanvas.width = imgWidth*10;
myCanvas.height = imgHeight*10;
Modified fiddle
I have a simple task - I need to draw one rectangle, rotate and copy it and clone its rotated version. I try to do it like so:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//1. rotate canvas
ctx.rotate(-30 * Math.PI / 180);
ctx.rect(10, 60, 80, 40);
ctx.stroke();
//2. copy rotated rectangle
var img = ctx.getImageData(0, 0, 140, 140);
//3. rotate back
ctx.rotate(30 * Math.PI / 180);
//4. draw rotated version of the rectangle
ctx.putImageData(img, 80, 100);
The idea is very simple. At first step I draw a rectangle, at the second step I rotate my canvas and do what I think is a snapshot (or create a copy of my rotated rectangle), at the third step I rotate my canvas back (so my rotated rectangle must not be rotated any longer) and at the final step I add a new object to the canvas - the copy of the rotated rectangle. But this is what I get:
Whereas I expected to get this picture:
What am I doing wrong and how can I get the desired result?
"putImageData is not affected by the transformation matrix"
See here: putImageData() on rotated canvas work incorrect
Instead, if you want a complex image to be copied into memory, and then repeatedly drawn on the screen at different angles, you might consider using a temporary canvas. This post gives a good example:
How to rotate the existing content of HTML5 canvas?
If you need to create multiple image sprites, and creating multiple canvases won't do, consider drawing your sprite to an appropriately sized temporary canvas, and then convert the contents of the temporary canvas to an image using canvas.toDataUrl
The post gives a nice example:
https://davidwalsh.name/convert-canvas-image
The question is related with that other question: https://stackoverflow.com/questions/26948677/translate-coordinates-to-its-equivalent-in-scale1 that no one gave response but it does not matter anymore because it's solved, at least that part. I get the correct x and y values.
I put you in situation, the app I'm developing allows the user to create a image with 6 differents backgrounds with funny characters without face so that the user can put a photo of his/her face. To do this, they can drag, pinch to zoom and rotate the image. Drag and pinch to zoom are under control but when the image is rotated I can not match the image in the exact coordinates. The images always go up a little.
An example, I get as values that:
x: 30,
y: 80,
scale: 0.5,
deg: 40.
So, when I draw into a canvas the rotated image the y seems to go up a little depending on the degrees. Less degrees, less go up.
I'm using this function to draw the image rotated:
var TO_RADIANS = Math.PI / 180;
var drawRotatedImage = function (context, image, x, y, angle) {
context.save();
context.translate(x, y);
context.rotate(angle * TO_RADIANS);
context.drawImage(image, -(image.width / 2), -(image.height / 2));
context.restore();
}
PD: To point it out, if I do not rotate the image, it matches perfectly in the correct position.
How I can get the correct x and y values for the rotated image?
For a game project, I need to calculate positions of items on a 2D plane relative to the camera.
Camera can be rotated, and it's coordinates refer to it's center.
In the attached images, a and b are items to display and c is camera.
First image is absolute positions of items in the world.
Second image is the result I'm trying to get.
Please note that rotation doesn't have to be 90 degrees, it can be any valid angle. I just used 90 degrees to keep this example simple.
Normally this is an easy task, but because camera can be rotated, translating to/from the center is not that easy, and it makes this problem complicated.
This is not using canvas element, so using canvas translation or rotation is not an option.
Here is the data used in this example, and some boilerplate code for trying solutions:
var items = {
a: {x: 3, y: 3},
b: {x: 2, y: 4}
};
var camera = {
x: 4, y: 4,
width: 4, height: 4,
rotation: 90
}
boilerplate code on jsfiddle.net
Any help would be appreciated.
You should do these steps to achieve your result
Translate the origin to the C point
Rotate your points by Rotation matrix
Return back the origin to its original position
At this point, your items and camera has been rotated, the only work that still is left, is the clipping by camera rectangle.
As far as I know such a clipping is not very hard and can be done easily.
Hope it helps you