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();
}

No comments:

Post a Comment