Showing posts with label Rectangle. Show all posts
Showing posts with label Rectangle. Show all posts

Tuesday, February 26, 2013

JavaScript Bound Rectangle Area while Rotation in Canvas





function checkTransformPoints(carCenterX, carCenterY, carWidth, carHeight,angle)

{
var w1 = carWidth*Math.cos((Math.PI / 180) * angle);
var w2 = carHeight*Math.cos((Math.PI / 180) * (90-angle));

var h1 = carHeight*Math.sin((Math.PI / 180) * (90-angle));
var h2 = carWidth*Math.sin((Math.PI / 180) * angle);

var maxWidth = w1 + w2;
var maxHeight= h1 + h2;
var minX = carCenterX - maxWidth/2;
var minY = carCenterY -maxHeight/2;

var maxX = carCenterX + maxWidth/2;
var maxY = carCenterY +maxHeight/2;

var extremeLeftX = minX + w2;
var extremeLeftY = minY;

var extremeRightX = maxX;
var extremeRightY = minY+h2;

var extremeBottomLeftX = minX;
var extremeBottomLeftY = maxY-h2;

var extremeBottomRightX = minX+w1;
var extremeBottomRightY = maxY;

 this.topLeftX = function () { return extremeLeftX; } this.topLeftY = function () { return extremeLeftY; } this.topRightX = function () { return extremeRightX; } this.topRightY = function () { return extremeRightY; } this.bottomLeftX = function () { return extremeBottomLeftX; } this.bottomLeftY = function () { return extremeBottomLeftY; } this.bottomRightX = function () { return extremeBottomRightX; } this.bottomRightY = function () { return extremeBottomRightY; }
ctxDrift.save();
ctxDrift.beginPath();
ctxDrift.rect(extremeLeftX, extremeLeftY, 10, 10);
ctxDrift.rect(extremeRightX, extremeRightY, 10, 10);
ctxDrift.rect(extremeBottomLeftX, extremeBottomLeftY, 10, 10);
ctxDrift.rect(extremeBottomRightX, extremeBottomRightY, 10, 10);
ctxDrift.fillStyle = 'white';
ctxDrift.globalAlpha = 1;
ctxDrift.closePath();
ctxDrift.stroke();
ctxDrift.fill();
ctxDrift.restore();
}