I have a canvas where i have drawn a series of images onto it that can be dragged and dropped around, each image is a seperate entity.
I need to, depending on where the image is dropped rotate that image so that it looks appropiate, imaging dragging a triangle around a circle, the base line needs to always point outwards.
I thought i would be able to rotate the image and then draw that on the canvas, but what i seem to find when searching on the internet is that the canvas rotates each time - is it possible to rotate the image only and then place it on the canvas?
Many Thanks!
Yes you can, but it's not as simple as setting a rotation attribute. The way canvas works you can't rotate individual items specifically, only the whole canvas.
To rotate a single item, you'll need to rotate the canvas, place the item, and then rotate the canvas back to it's original orientation.
This question has a few examples: How do I rotate a single object on an html 5 canvas?
Before placing the image on the canvas, create a buffer canvas, place image there, rotate it and then port to main canvas.
var canvas = document.getElementById('test_canvas');
var ctx = canvas.getContext('2d');
var buffer = document.createElement('canvas');
buffer.width = buffer.height = 60;
var bctx = buffer.getContext('2d');
bctx.translate(30, 30);
bctx.rotate(0.5);
bctx.fillStyle = 'rgb(255, 0, 0)';
bctx.fillRect(-15, -15, 30, 30);
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(30, 30, 30, 30);
ctx.drawImage(buffer, 50, 50);
You can check this code at JSFiddle I've setup - http://jsfiddle.net/dzenkovich/UdaUA/2/
Note you'll need to keep a close eye at the rotation point and buffer canvas size for this to work.
For more info check out this article I've found http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/
Related
I am creating one geometry at location (0,0,0) but projecting at some other location (for ex. #50,50,50). If the point (0,0,0) is going out of canvas, then geometry is hiding.
Is there any way to always render it on canvas?
How far off the edge does the origin need to be?
You could make the canvas larger than you need, than mask the areas on the edge such that only the center area shows. That way when the origin goes off the side, it will still technically be on the canvas, and the projected geometry will be in the visible area. I expect you will only need a buffer space equal to projection offset.
See here for an example of applying a mask: https://jsfiddle.net/shawnoakley/n1368qr0/2/
Example code:
var context = document.getElementById('canvas').getContext('2d');
// Mask color
context.fillStyle = '#000';
// Image proportions
context.fillRect(0,0,600,400);
var unmaskedImage = function(x, y, radius){
context.save();
context.globalCompositeOperation = 'destination-out';
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fill();
context.restore();
};
unmaskedImage(300, 300, 300);
I am using the windows GDI API ExtTextOut function to draw text like this:
ExtTextOut(hDC, 2000, 2000, 0, &stRect, PrintText, TextOutLen, aiCharCellDistances);
I am trying to rotate the text, and I do rotate the text. But when I fill the rectangle with colors, I found that the rectangle didn't rotate with the text.
Is there any way to rotate the rectangle with the text? Or is there a better way to do this?
P.S.: My goal is to draw text in the rectangle (like text area) and can rotate it in any angle, and set background color, border line, line break, align right, etc.
Thanks!
It's not 100% clear what you want, but I think you want to draw some text and rectangle rotated at the same angle? If so, it's probably easiest to use SetWorldTransform to do the job.
Here's some code doing it with MFC:
double factor = (2.0f * 3.1416f)/360.0f;
double rot = 45.0f * factor;
// Create a matrix for the transform we want (read the docs for details)
XFORM xfm = { 0.0f };
xfm.eM11 = (float)cos(rot);
xfm.eM12 = (float)sin(rot);
xfm.eM21 = (float)-sin(rot);
xfm.eM22 = (float)cos(rot);
pDC->SetGraphicsMode(GM_ADVANCED);
pDC->SetWorldTransform(&xfm); // Tell Windows to use that transform matrix
pDC->SetBkMode(TRANSPARENT);
CRect rect{ 290, 190, 450, 230 };
CBrush red;
red.CreateSolidBrush(RGB(255, 0, 0));
pDC->FillRect(rect, &red); // Draw a red rectangle behind the text
pDC->TextOut(300, 200, L"This is a string"); // And draw the text at the same angle
For the most part, doing this without MFC just means changing pDC->foo(args) to foo(dc, args).
The result looks like this:
Note that in this case, you do not need to specify rotation (at all--either lfRotation or lfEscapement) for the font you use. You just draw like it was normal text, and the world transform handles all the rotation.
I'm trying to rotate an image added to my canvas using KineticJS.
I got it almost working.
I know I need to set the offset to 'move' the rotation point, that part is working.
But it is also moving to that location of the offset.
After doing some rotating I can drag my image to another location in the canvas and continue rotating around its own center.
I don't want to rotate the whole canvas, because I have multiple images on a layer.
The relevant code:
function rotateLayer() {
// Rotate bird image
var rotation = 15;
// Set rotation point:
imageDict[1].setOffsetX(imageDict[1].width() / 2);
imageDict[1].setOffsetY(imageDict[1].height() / 2);
// rotation in degrees
imageDict[1].rotate(rotation);
imageDict[1].getLayer().draw();
}
A working demo is on jsfiddle: http://jsfiddle.net/kp61vcfg/1/
So in short I want the rotation but not the movement.
How you want to rotate without movement?
KineticJS rotate objects relative it's "start point" . For example for Kinetic.Rect start points is {0, 0} - top left corner. You may move such "start point" to any position with offset params.
After a lot of trail and error I found the solution.
The trick is to set the offset during load to the half width and height to set the rotation point to the middle of the image AND don't call image.cache:
function initAddImage(imgId, imgwidth, imgheight) {
var imageObj = new Image();
imageObj.src = document.getElementById(imgId).src;
imageObj.onload = function () {
var image = new Kinetic.Image({
image: imageObj,
draggable: true,
shadowColor: '#787878',
shadowOffsetX: 2,
shadowOffsetY: 2,
width: imgwidth,
height: imgheight,
x: 150, // half width of container
y: 150, // half height of container
offset : {x : imgwidth / 2, y : imgheight / 2}, // Rotation point
imgId: imgId
});
layer.add(image);
//image.cache();
layer.draw();
imageDict[currentLayerHandle] = image;
currentLayerHandle++;
};
}
I've updated my demo to a working version:
http://jsfiddle.net/kp61vcfg/2/
I want to draw a closed shape(Using paths) & my stroke width is 10.
Now,i want to fill that shape,i can fill it using fill() function of context.
But,when i want to change alpha of my shape,then stroke & fill area overlap at border of shape.
I want only fill the area of shape that remains black after my stroke.
I have attached image of explaining my problem.
Click here to show shape with stork & fill bug.
As you can see in jsfiddle,
-- Color of overlapping area are composite color. That i don't want.
I want it to be exactly same as in border(or stroke color with alpha).
-- i am not enable to specify fill area of closed path.(there is no method of contexx.)
-- I can't use "glabalCompositeOperation",because i am drawing more than 1 shapes in 1 canvas in my application.
The effect you are getting seems to be a property of how canvas draws lines round a shape. Half the thickness of the line is drawn inside the shape and half outside the shape. One way round it is to draw the filled shape and the border as seperate paths. The changes to do this for your example are shown below. This will be more difficult with irregular shapes.
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var topLeftCornerX = 188;
var topLeftCornerY = 50;
var width = 200;
var height = 100;
var linewidth = 10;
context.globalAlpha = 0.5;
context.beginPath();
context.moveTo(topLeftCornerX, topLeftCornerY);
context.lineTo(topLeftCornerX+width,topLeftCornerY);
context.lineTo(topLeftCornerX+width,topLeftCornerY+height);
context.lineTo(topLeftCornerX,topLeftCornerY+height);
context.closePath();
context.fillStyle = "#FF0000";
context.fill();
context.beginPath();
context.moveTo(topLeftCornerX-linewidth/2, topLeftCornerY-linewidth/2);
context.lineTo(topLeftCornerX+width+linewidth/2,topLeftCornerY-linewidth/2);
context.lineTo(topLeftCornerX+width+linewidth/2,topLeftCornerY+height+linewidth/2);
context.lineTo(topLeftCornerX-linewidth/2,topLeftCornerY+height+linewidth/2);
context.closePath();
context.lineWidth = linewidth;
context.strokeStyle = "#00FF00";
context.stroke();
**
Found the solution
Because of the fact this is a tile, the image will always be strechted to 173 by 173!
To avoid this first create a dummy 173 by 173 and merge this with the resized one!
Rect rect = new Rect(0.0, 0.0, width, height);
WriteableBitmap bitmapDummy = new WriteableBitmap(173, 173);
bitmapDummy.Blit(rect, resized, rect, WriteableBitmapExtensions.BlendMode.None);
**
Well I have created a Background agent to update the live tile of my WP7 app.
But no matter what I try to resize it, I'm not getting a good result!
Any tips? Currently I have following code, but I also tried 135 by 173 and also the other Interpolation.
WriteableBitmap writeableBitmap = new WriteableBitmap(bitmapImage);
var resized = writeableBitmap.Resize(173, 173, System.Windows.Media.Imaging.WriteableBitmapExtensions.Interpolation.Bilinear);
There is also a small rectangle added below to show the title of the app! It's 40px in height, would be great if image would be cropped above.
The actual image is always 250 by 321px
Your problem is that you're not calculating the width/heights to a correct Aspect ratio.
So to get a 1:1 proportions, you would need a width of 134.735 pixels, for a 173 pixel height.
This can be done by first determining what side is the largest
var aspect = Math.Max(bitmapImage.Width, bitmapImage.Height)
var ratio = largest / 173;
var width = width / ratio;
var height = height / ratio;
var resizedImage = writeableBitmap.Resize(width, height, System.Windows.Media.Imaging.WriteableBitmapExtensions.Interpolation.Bilinear);
And remember to set Stretch="Uniform" to avoid stretching the image to unnecessary proportions.
To create a 173x173 pixel image, with the other image applied on top, use the Blit function from WriteableBitmapEx
var tileImage = new WriteableBitmap(173, 173, ...)
tileImage.Blit(new Rect(width, height), resizedImage, new Rect(width, height), BlendMode.None);