github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

cleaned svgedit.math.transformBox(), wrote the according test

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2398 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Bruno Heridet
2013-02-15 19:42:04 +00:00
parent e906a0f6fd
commit 4c4fff6a0d
2 changed files with 89 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
editor/math.js
View File

@@ -27,7 +27,7 @@ var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
// Function: svgedit.math.transformPoint
// A (hopefully) quicker function to transform a point by a matrix
// (this function avoids any DOM calls and just does the math)
//
//
// Parameters:
// x - Float representing the x coordinate
// y - Float representing the y coordinate
@@ -42,7 +42,7 @@ svgedit.math.transformPoint = function(x, y, m) {
// Helper function to check if the matrix performs no actual transform
// (i.e. exists for identity purposes)
//
// Parameters:
// Parameters:
// m - The matrix object to check
//
// Returns:
@@ -55,11 +55,11 @@ svgedit.math.isIdentity = function(m) {
// Function: svgedit.math.matrixMultiply
// This function tries to return a SVGMatrix that is the multiplication m1*m2.
// We also round to zero when it's near zero
//
//
// Parameters:
// >= 2 Matrix objects to multiply
//
// Returns:
// Returns:
// The matrix object resulting from the calculation
svgedit.math.matrixMultiply = function() {
var args = arguments, i = args.length, m = args[i-1];
@@ -81,10 +81,10 @@ svgedit.math.matrixMultiply = function() {
// Function: svgedit.math.hasMatrixTransform
// See if the given transformlist includes a non-indentity matrix transform
//
// Parameters:
// Parameters:
// tlist - The transformlist to check
//
// Returns:
// Returns:
// Boolean on whether or not a matrix transform was found
svgedit.math.hasMatrixTransform = function(tlist) {
if (!tlist) return false;
@@ -105,7 +105,7 @@ svgedit.math.hasMatrixTransform = function(tlist) {
// w - Float with the box width
// h - Float with the box height
// m - Matrix object to transform the box by
//
//
// Returns:
// An object with the following values:
// * tl - The top left coordinate (x,y object)
@@ -118,34 +118,30 @@ svgedit.math.hasMatrixTransform = function(tlist) {
// * Float with the axis-aligned width coordinate
// * Float with the axis-aligned height coordinate
svgedit.math.transformBox = function(l, t, w, h, m) {
var topleft = {x:l, y:t},
topright = {x:(l+w), y:t},
botright = {x:(l+w), y:(t+h)},
botleft = {x:l, y:(t+h)};
var transformPoint = svgedit.math.transformPoint;
topleft = transformPoint( topleft.x, topleft.y, m );
var minx = topleft.x,
maxx = topleft.x,
miny = topleft.y,
maxy = topleft.y;
topright = transformPoint( topright.x, topright.y, m );
minx = Math.min(minx, topright.x);
maxx = Math.max(maxx, topright.x);
miny = Math.min(miny, topright.y);
maxy = Math.max(maxy, topright.y);
botleft = transformPoint( botleft.x, botleft.y, m);
minx = Math.min(minx, botleft.x);
maxx = Math.max(maxx, botleft.x);
miny = Math.min(miny, botleft.y);
maxy = Math.max(maxy, botleft.y);
botright = transformPoint( botright.x, botright.y, m );
minx = Math.min(minx, botright.x);
maxx = Math.max(maxx, botright.x);
miny = Math.min(miny, botright.y);
maxy = Math.max(maxy, botright.y);
var transformPoint = svgedit.math.transformPoint,
return {tl:topleft, tr:topright, bl:botleft, br:botright,
aabox: {x:minx, y:miny, width:(maxx-minx), height:(maxy-miny)} };
tl = transformPoint(l, t, m),
tr = transformPoint((l + w), t, m),
bl = transformPoint(l, (t + h), m),
br = transformPoint((l + w), (t + h), m),
minx = Math.min(tl.x, tr.x, bl.x, br.x),
maxx = Math.max(tl.x, tr.x, bl.x, br.x),
miny = Math.min(tl.y, tr.y, bl.y, br.y),
maxy = Math.max(tl.y, tr.y, bl.y, br.y);
return {
tl: tl,
tr: tr,
bl: bl,
br: br,
aabox: {
x: minx,
y: miny,
width: (maxx - minx),
height: (maxy - miny)
}
};
};
// Function: svgedit.math.transformListToTransform
@@ -153,7 +149,7 @@ svgedit.math.transformBox = function(l, t, w, h, m) {
// (this is the equivalent of SVGTransformList.consolidate() but unlike
// that method, this one does not modify the actual SVGTransformList)
// This function is very liberal with its min,max arguments
//
//
// Parameters:
// tlist - The transformlist object
// min - Optional integer indicating start transform position
@@ -188,7 +184,7 @@ svgedit.math.transformListToTransform = function(tlist, min, max) {
//
// Parameters:
// elem - The DOM element to check
//
//
// Returns:
// The matrix object associated with the element's transformlist
svgedit.math.getMatrix = function(elem) {
@@ -200,14 +196,14 @@ svgedit.math.getMatrix = function(elem) {
// Function: svgedit.math.snapToAngle
// Returns a 45 degree angle coordinate associated with the two given
// coordinates
//
//
// Parameters:
// x1 - First coordinate's x value
// x2 - Second coordinate's x value
// y1 - First coordinate's y value
// y2 - Second coordinate's y value
//
// Returns:
// Returns:
// Object with the following values:
// x - The angle-snapped x value
// y - The angle-snapped y value
@@ -218,11 +214,13 @@ svgedit.math.snapToAngle = function(x1, y1, x2, y2) {
var dy = y2 - y1;
var angle = Math.atan2(dy, dx);
var dist = Math.sqrt(dx * dx + dy * dy);
var snapangle= Math.round(angle/snap)*snap;
var x = x1 + dist*Math.cos(snapangle);
var y = y1 + dist*Math.sin(snapangle);
//console.log(x1,y1,x2,y2,x,y,angle)
return {x:x, y:y, a:snapangle};
var snapangle = Math.round(angle/snap) * snap;
return {
x: x1 + dist * Math.cos(snapangle),
y: y1 + dist * Math.sin(snapangle),
a: snapangle
};
};
@@ -236,7 +234,7 @@ svgedit.math.snapToAngle = function(x1, y1, x2, y2) {
// Returns:
// Boolean that's true if rectangles intersect
svgedit.math.rectsIntersect = function(r1, r2) {
return r2.x < (r1.x+r1.width) &&
return r2.x < (r1.x+r1.width) &&
(r2.x+r2.width) > r1.x &&
r2.y < (r1.y+r1.height) &&
(r2.y+r2.height) > r1.y;

70
test/math_test.html
View File

@@ -1,14 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script src='../editor/jquery.js'></script>
<script type='text/javascript' src='../editor/math.js'></script>
<script type='text/javascript' src='qunit/qunit.js'></script>
<script type='text/javascript'>
$(function() {
// log function
QUnit.log = function(result, message) {
<link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
<script src='../editor/jquery.js'></script>
<script type='text/javascript' src='../editor/math.js'></script>
<script type='text/javascript' src='qunit/qunit.js'></script>
<script type='text/javascript'>
$(function() {
// log function
QUnit.log = function(result, message) {
if (window.console && window.console.log) {
window.console.log(result +' :: '+ message);
}
@@ -21,7 +21,7 @@
test('Test svgedit.math package', function() {
expect(7);
ok(svgedit.math);
ok(svgedit.math.transformPoint);
ok(svgedit.math.isIdentity);
@@ -42,19 +42,19 @@
var pt = transformPoint(100, 200, m);
equals(pt.x, 100);
equals(pt.y, 200);
m.e = 300; m.f = 400;
pt = transformPoint(100, 200, m);
equals(pt.x, 400);
equals(pt.y, 600);
m.a = 0.5; m.b = 0.75;
m.c = 1.25; m.d = 2;
pt = transformPoint(100, 200, m);
equals(pt.x, 100 * m.a + 200 * m.c + m.e);
equals(pt.y, 100 * m.b + 200 * m.d + m.f);
});
test('Test svgedit.math.isIdentity() function', function() {
expect(2);
@@ -95,20 +95,44 @@
I = mult(scale_up, scale_down, scale_down_more);
ok(isIdentity(I), 'Expected identity matrix when scaling up and down');
// test multiplication with its inverse
// test multiplication with its inverse
I = mult(rot_there, rot_there.inverse());
ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
I = mult(rot_there.inverse(), rot_there);
ok(isIdentity(I), 'Expected identity matrix when multiplying a matrix by its inverse');
});
});
</script>
</head>
<body>
<h1 id='qunit-header'>Unit Tests for math.js</h1>
<h2 id='qunit-banner'></h2>
<h2 id='qunit-userAgent'></h2>
<ol id='qunit-tests'>
</ol>
</body>
test('Test svgedit.math.transformBox() function', function() {
expect(12);
var transformBox = svgedit.math.transformBox;
var m = svg.createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 0; m.f = 0;
var r = transformBox(10, 10, 200, 300, m);
equals(r.tl.x, 10);
equals(r.tl.y, 10);
equals(r.tr.x, 210);
equals(r.tr.y, 10);
equals(r.bl.x, 10);
equals(r.bl.y, 310);
equals(r.br.x, 210);
equals(r.br.y, 310);
equals(r.aabox.x, 10);
equals(r.aabox.y, 10);
equals(r.aabox.width, 200);
equals(r.aabox.height, 300);
});
});
</script>
</head>
<body>
<h1 id='qunit-header'>Unit Tests for math.js</h1>
<h2 id='qunit-banner'></h2>
<h2 id='qunit-userAgent'></h2>
<ol id='qunit-tests'>
</ol>
</body>
</html>