JS calculting width and height for rotated rectangle - javascript

am trying to draw rectangles it different angles , initially i know rectangle position data it 0 degree , then sometime i get angle greater than 0 so i have to draw on that angle , for which i then have to rotate points. so currently i can rotate points but do not know to calculate width and height after rotation.
am doing it like ...
// Main rotation function
function rotate(originX, originY,pointX, pointY, angle) {
angle = angle * Math.PI / 180.0;
return {
x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY
};
}
// initial Rectangle
ctx.fillStyle = "red";
var x = 200
var y = 200
var w = 80
var h = 20
var angle = 90 ;
ctx.fillRect(x, y, w, h);
// Calculate Center
var cx = (x + (w/2));
var cy = (y + (h/2));
// highlight Center
ctx.fillStyle = "black";
ctx.fillRect(cx,cy, 5, 5);
// Rotate starting x y at angle xxx
var r = rotate(cx,cy,x,y, angle - h );
// highlight roate points
ctx.fillStyle = "yellow";
ctx.fillRect(r.x, r.y, 5, 5);
// rotate Width and Height
var r2 = rotate(cx,cy,x+w,y+h, angle - h );
// highlight roate points
ctx.fillStyle = "green";
ctx.fillRect(r2.x, r2.y, 5, 5);
ctx.save();
so it end i rotated width and height which is ok for single line , but am interested in full rotation of width of height , like it 90 angle old with will become new height and old height will become new width. so any idea how to do it
Fiddle : https://jsfiddle.net/047txgox/

fixed it , hope will help someone
var x = 40
var y = 80
var w = 80
var h = 20
var angle = 120 ;
// Calculate Center
var cx = (x + (w/2));
var cy = (y + (h/2));
context.setTransform(1,0,0,1,0,0)
context.translate(cx, cy);
context.rotate(angle*Math.PI/180);
context.translate(-cx, -cy);
context.rect(x, y, w, h);
context.fillStyle = "#FF00FF";
context.fill();
// highlight Center
context.fillStyle = "black";
context.fillRect(cx,cy, 5, 5);
context.save();
Fiddle : http://jsfiddle.net/vorjcbz7/

Related

HTML5 Canvas rotate gradient around centre with best fit

I want to make a gradient that covers the whole canvas whatever the angle of it.
So I used a method found on a Stack Overflow post which is finally incorrect. The solution is almost right but, in fact, the canvas is not totally covered by the gradient.
It is this answer: https://stackoverflow.com/a/45628098/5594331
(You have to look at the last point named "Example of best fit.")
In my code example below, the yellow part should not be visible because it should be covered by the black and white gradient. This is mostly the code written in Blindman67's answer with some adjustments to highlight the problem.
I have drawn in green the control points of the gradient. With the right calculations, these should be stretched to the edges of the canvas at any angle.
var ctx = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
function bestFitGradient(angle){
var dist = Math.sqrt(w * w + h * h) / 2; // get the diagonal length
var diagAngle = Math.asin((h / 2) / dist); // get the diagonal angle
// Do the symmetry on the angle (move to first quad
var a1 = ((angle % (Math.PI *2))+ Math.PI*4) % (Math.PI * 2);
if(a1 > Math.PI){ a1 -= Math.PI }
if(a1 > Math.PI / 2 && a1 <= Math.PI){ a1 = (Math.PI / 2) - (a1 - (Math.PI / 2)) }
// get angles from center to edges for along and right of gradient
var ang1 = Math.PI/2 - diagAngle - Math.abs(a1);
var ang2 = Math.abs(diagAngle - Math.abs(a1));
// get distance from center to horizontal and vertical edges
var dist1 = Math.cos(ang1) * h;
var dist2 = Math.cos(ang2) * w;
// get the max distance
var scale = Math.max(dist2, dist1) / 2;
// get the vector to the start and end of gradient
var dx = Math.cos(angle) * scale;
var dy = Math.sin(angle) * scale;
var x0 = w / 2 + dx;
var y0 = h / 2 + dy;
var x1 = w / 2 - dx;
var y1 = h / 2 - dy;
// create the gradient
const g = ctx.createLinearGradient(x0, y0, x1, y1);
// add colours
g.addColorStop(0, "yellow");
g.addColorStop(0, "white");
g.addColorStop(.5, "black");
g.addColorStop(1, "white");
g.addColorStop(1, "yellow");
return {
g: g,
x0: x0,
y0: y0,
x1: x1,
y1: y1
};
}
function update(timer){
var r = bestFitGradient(timer / 1000);
// draw gradient
ctx.fillStyle = r.g;
ctx.fillRect(0,0,w,h);
// draw points
ctx.lineWidth = 3;
ctx.fillStyle = '#00FF00';
ctx.strokeStyle = '#FF0000';
ctx.beginPath();
ctx.arc(r.x0, r.y0, 5, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fill();
ctx.beginPath();
ctx.arc(r.x1, r.y1, 5, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fill();
requestAnimationFrame(update);
}
requestAnimationFrame(update);
canvas {
border : 2px solid red;
}
<canvas id="canvas" width="300" height="200"></canvas>
In this fiddle there is a function that calculates the distance between a rotated line and a point:
function distanceToPoint(px, py, angle) {
const cx = width / 2;
const cy = height / 2;
return Math.abs((Math.cos(angle) * (px - cx)) - (Math.sin(angle) * (py - cy)));
}
Which is then used to find the maximum distance between the line and the corner points (only two points are considered, because the distances to the other two points are mirrored):
const dist = Math.max(
distanceToPoint(0, 0, angle),
distanceToPoint(0, height, angle)
);
Which can be used to calculate offset points for the end of the gradient:
const ox = Math.cos(angle) * dist;
const oy = Math.sin(angle) * dist;
const gradient = context.createLinearGradient(
width / 2 + ox,
height / 2 + oy,
width / 2 - ox,
height / 2 - oy
)

Calculate 2D rotation javascript HTML canvas

Implemented a canvas, Drawing a square there and get the calculated coordinates,
Can see on the following pic the drawing:
I'm calculating and getting the upleft point X and Y coordinates,
And for the down right coordinates that i need, I'm adding the height and width, as follows:
{ upLeft: { x: position.x, y: position.y }, downRight: { x: position.x + position.width, y: position.y + position.height } },
Now i want to get the same dimensions when i'm rotating the canvas clockwise or anti-clockwise.
So i have the angle, And i try to calculate via the following function:
function getRotatedCoordinates(cx, cy, x, y, angle) {
let radians = (Math.PI / 180) * angle,
cos = Math.cos(radians),
sin = Math.sin(radians),
nx = (cos * (x - cx)) - (sin * (y - cy)) + cx,
ny = (cos * (y - cy)) + (sin * (x - cx)) + cy;
return [nx, ny];
}
And i'm calling the function via the following args and using it.
let newCoords = getRotatedCoordinates(0, 0, position.x, position.y, angle);
position.x = newCoords[0];
position.y = newCoords[1];
So firstly, I'm not sure that the cx and cy points are correct, I'm always entering 0 for both of them.
Secondly, I'm not getting the desired results, They are getting changed but i'm pretty sure that something is wrong with the x and y, So i guess that the function is wrong.
Thanks.
Here is how I would do it:
function getRectangeCoordinates(x, y, width, height, angle) {
let points = [ [x, y] ]
let radians = (Math.PI / 180) * angle;
for (let i = 0; i < 3; i++) {
x += Math.cos(radians) * ((i == 1) ? height : width);
y += Math.sin(radians) * ((i == 1) ? height : width);
points.push([x, y])
radians += Math.PI / 2
}
return points
}
let canvas = document.createElement("canvas");
canvas.width = canvas.height = 140
let ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function draw(coords, radius) {
for (let i = 0; i < 4; i++) {
ctx.beginPath();
ctx.arc(coords[i][0], coords[i][1], radius, 0, 8);
ctx.moveTo(coords[i][0], coords[i][1]);
let next = (i + 1) % 4
ctx.lineTo(coords[next][0], coords[next][1]);
ctx.stroke();
}
}
let coords = getRectangeCoordinates(20, 10, 120, 40, 15)
console.log(JSON.stringify(coords))
draw(coords, 3)
ctx.strokeStyle = "red";
coords = getRectangeCoordinates(60, 40, 40, 50, 65)
draw(coords, 5)
ctx.strokeStyle = "blue";
coords = getRectangeCoordinates(120, 3, 20, 20, 45)
draw(coords, 2)
In the getRectangeCoordinates I'm returning all corners of a rectangle and the paraments of the function are the top left corner (x, y) the height and width of the rectangle and last the angle.
I'm drawing a few rectangles with different shapes and angles to show how it looks like
The calculations in the function are simple trigonometry here is a visual representation that could help you remember it the next time you need it:

How to draw parallel edges (arrows) between vertices with canvas?

I'm working on a flow-network visualization with Javascript.
Vertices are represented as circles and edges are represented as arrows.
Here is my Edge class:
function Edge(u, v) {
this.u = u; // start vertex
this.v = v; // end vertex
this.draw = function() {
var x1 = u.x;
var y1 = u.y;
var x2 = v.x;
var y2 = v.y;
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
var dx = x1 - x2;
var dy = y1 - y2;
var length = Math.sqrt(dx * dx + dy * dy);
x1 = x1 - Math.round(dx / ((length / (radius))));
y1 = y1 - Math.round(dy / ((length / (radius))));
x2 = x2 + Math.round(dx / ((length / (radius))));
y2 = y2 + Math.round(dy / ((length / (radius))));
// calculate the angle of the edge
var deg = (Math.atan(dy / dx)) * 180.0 / Math.PI;
if (dx < 0) {
deg += 180.0;
}
if (deg < 0) {
deg += 360.0;
}
// calculate the angle for the two triangle points
var deg1 = ((deg + 25 + 90) % 360) * Math.PI * 2 / 360.0;
var deg2 = ((deg + 335 + 90) % 360) * Math.PI * 2 / 360.0;
// calculate the triangle points
var arrowx = [];
var arrowy = [];
arrowx[0] = x2;
arrowy[0] = y2;
arrowx[1] = Math.round(x2 + 12 * Math.sin(deg1));
arrowy[1] = Math.round(y2 - 12 * Math.cos(deg1));
arrowx[2] = Math.round(x2 + 12 * Math.sin(deg2));
arrowy[2] = Math.round(y2 - 12 * Math.cos(deg2));
context.beginPath();
context.moveTo(arrowx[0], arrowy[0]);
context.lineTo(arrowx[1], arrowy[1]);
context.lineTo(arrowx[2], arrowy[2]);
context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
};
}
Given the code
var canvas = document.getElementById('canvas'); // canvas element
var context = canvas.getContext("2d");
context.lineWidth = 1;
context.strokeStyle = "black";
var radius = 20; // vertex radius
var u = {
x: 50,
y: 80
};
var v = {
x: 150,
y: 200
};
var e = new Edge(u, v);
e.draw();
The draw() function will draw an edge between two vertices like this:
If we add the code
var k = new Edge(v, u);
k.draw();
We will get:
but I want to draw edges both directions as following:
(sorry for my bad paint skills)
Of course the vertices and the edge directions are not fixed.
A working example (with drawing vertex fucntion) on JSFiddle:
https://jsfiddle.net/Romansko/0fu01oec/18/
Aligning axis to a line.
It can make everything a little easier if you rotate the rendering to align with the line. Once you do that it is then easy to draw above or below the line as that is just in the y direction and along the line is the x direction.
Thus if you have a line
const line = {
p1 : { x : ? , y : ? },
p2 : { x : ? , y : ? },
};
Convert it to a vector and normalise that vector
// as vector from p1 to p2
var nx = line.p2.x - line.p1.x;
var ny = line.p2.y - line.p1.y;
// then get length
const len = Math.sqrt(nx * nx + ny * ny);
// use the length to normalise the vector
nx /= len;
ny /= len;
The normalised vector represents the new x axis we want to render along, and the y axis is at 90 deg to that. We can use setTransform to set both axis and the origin (0,0) point at the start of the line.
ctx.setTransform(
nx, ny, // the x axis
-ny, nx, // the y axis at 90 deg to the x axis
line.p1.x, line.p1.y // the origin (0,0)
)
Now rendering the line and arrow heads is easy as they are axis aligned
ctx.beginPath();
ctx.lineTo(0,0); // start of line
ctx.lineTo(len,0); // end of line
ctx.stroke();
// add the arrow head
ctx.beginPath();
ctx.lineTo(len,0); // tip of arrow
ctx.lineTo(len - 10, 10);
ctx.lineTo(len - 10, -10);
ctx.fill();
To render two lines offset from the center
var offset = 10;
ctx.beginPath();
ctx.lineTo(0,offset); // start of line
ctx.lineTo(len,offset); // end of line
ctx.moveTo(0,-offset); // start of second line
ctx.lineTo(len,-offset); // end of second line
ctx.stroke();
// add the arrow head
ctx.beginPath();
ctx.lineTo(len,offset); // tip of arrow
ctx.lineTo(len - 10, offset+10);
ctx.lineTo(len - 10, offset-10);
ctx.fill();
offset = -10;
// add second arrow head
ctx.beginPath();
ctx.lineTo(0,offset); // tip of arrow
ctx.lineTo(10, offset+10);
ctx.lineTo(10, offset-10);
ctx.fill();
And you can reset the transform with
ctx.setTransform(1,0,0,1,0,0); // restore default transform

Why properties previous circle in canvas is getting replaced with newer properties?

I have canvas, where I wanted to draw one inner and just above it one outer circle. First of some weired line is shown between in circle. Secondly, I want lineWidth of outer circle as 5, it is also making outer circle with as 5.
How to stop this?
My code,
<script>
function drawCircle() {
var circleCanvas = document.getElementById("myCircleCanvas");
var circle = circleCanvas.getContext("2d");
circle.beginPath();
var x = 95;
var y = 75;
var radius = 60;
circle.arc(x, y, radius, 0, 2 * Math.PI);
circle.stroke();
circle.fillStyle = '#505050';
circle.fill();
circle.fillStyle = '#fff';
var font = "bold " + radius / 3 + "px serif";
circle.font = font;
circle.fillText("AVAYA", x - x / 3, y - y / 5);
circle.fillStyle = '#000';
circle.fillText("CIE", x - x / 3 + 15, y - y / 5 + 25);
circle.arc(x, y, radius + 10, 0, 2 * Math.PI);
circle.lineWidth = 5;//just want to increase outer circle
circle.stroke(); //why drawing extra line
}
</script>
<canvas id="myCircleCanvas">Your browser does not support the HTML5 canvas tag.
</canvas>
If you want the two circles to be treated independently, close the path that you started and begin a new one before you draw the second circle. For instance:
function drawCircle() {
var circleCanvas = document.getElementById("myCircleCanvas");
var circle = circleCanvas.getContext("2d");
circle.beginPath();
var x = 95;
var y = 75;
var radius = 60;
circle.arc(x, y, radius, 0, 2 * Math.PI);
circle.stroke();
circle.fillStyle = '#505050';
circle.fill();
circle.fillStyle = '#fff';
var font = "bold " + radius / 3 + "px serif";
circle.font = font;
circle.fillText("AVAYA", x - x / 3, y - y / 5);
circle.fillStyle = '#000';
circle.fillText("CIE", x - x / 3 + 15, y - y / 5 + 25);
circle.closePath();
circle.beginPath();
circle.arc(x, y, radius + 10, 0, 2 * Math.PI);
circle.lineWidth = 5;//just want to increase outer circle
circle.stroke(); //why drawing extra line
circle.closePath();
}
http://jsfiddle.net/mudbo48j/1

animate canvas up and down based on cylinder height and variable value which i enter in the code

Animating canvas (line) up and down based on the variable value.
Here I have added variable name position. Default my line will be in bottom of the cylinder. When I enter the value as 20 it has move up and vice verca if I enter the value as 15 it has to come down like that 0 - 100. So what I tried was I created a variable inside a new function call
function animatecurve()
{
var position = 0;
alert("position " + position);
var bottomcylin = $('#canvas').position().top + $('#canvas').outerHeight(true);
alert("cylinder bottom" + bottomcylin);
if (position1 > 0) {
alert("inside position" + position1);
$('#myCanvas').animate({top:"-=10px",}, 300);
} else {
$('#myCanvas').animate({top:"0px",}, 300);
}
}
Here I have found outerheight of the cylinder. It should not go beyond the cylinder if i enter the value 30 in the position my curve has to move towards top of the cylinder.
Fiddle link
Please guide me.
Regards
M
Take a look http://jsfiddle.net/BG6p2/, maybe this is what you are looking for
HTML
<canvas id="canvas" width="300" height="500"></canvas>
<input type="text" id="level" placeholder="type value here %" />
Javascript
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
input = document.getElementById('level');
//helpers
ctx.drawEllipse = function(x, y, radius, color, colorBorder){
this.fillStyle = '#000';
this.strokeStyle = '#000';
this.save();
this.scale(2, 1);
this.beginPath();
this.arc(x, y, radius, 0, 2 * Math.PI, false);
this.restore();
this.closePath();
if(color) {
this.fillStyle = color;
this.fill();
if(colorBorder) this.strokeStyle = color;
}
this.stroke();
}
ctx.drawLine = function(startX, startY, endX, endY, color){
if(color) this.strokeStyle = color;
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.stroke();
};
/**
* #params
* #param x - top left x coordinate
* #param y - top left y coordinate
* #param radius - ellipsis radius
* #param height - cylinder height
* #param liquidColor - inner liquid color
* #param liquidSunnySideColor - liquid surface color
* #param liquidLevel - liquid level
**/
ctx.drawCylinder = function(x, y, radius, height, liquidColor, liquidSunnySideColor,liquidLevel){
//do not spill
liquidLevel = Math.min(height, liquidLevel);
//draw liquid inner body
ctx.fillStyle = liquidColor;
ctx.fillRect(x, y + (height - liquidLevel), x + radius * 4, liquidLevel);
//console.log(x, y);
//bottom cap
ctx.drawEllipse(x, y + height, radius, liquidLevel ? liquidColor : false);
//liquid level
ctx.drawEllipse(x, y + (height - liquidLevel), radius, liquidLevel ? liquidSunnySideColor : false, true);
ctx.drawEllipse(x, y + height, radius);
//top cap
ctx.drawEllipse(x, y, radius);
//left border
ctx.drawLine(x, y, x, y + height, '#000');
//right border
ctx.drawLine(x + radius * 4, y, x + radius * 4, y + height, '#000');
}
var renderLoop = window.webkitRequestAnimationFrame,
//workers
_fps = 60,
_speed = 1,
_currentLevel = 0,
_maxLevel = 0,
_renderTime = 0,
_render,
time,
//cylinder
x = 100,
y = 100,
radius = 50,
height = 200;
_render = function(){
time = window.performance.now();
if(time - _renderTime > 1000 / _fps){
ctx.clearRect(0, 0, 300, 500);
//only positive values
_currentLevel = Math.max(0, _currentLevel);
if(_currentLevel > _maxLevel) _currentLevel -= _speed;
if(_currentLevel < _maxLevel) _currentLevel += _speed;
ctx.drawCylinder(x, y, radius, height, '#90C94D', '#BBED80', _currentLevel);
_renderTime = time;
}
renderLoop(_render);
}
_render();
input.addEventListener('blur', function(){
//only positive values
_maxLevel = Math.max(0, height * Math.min(1, this.value / 100));
});

Categories