svnno****@sourc*****
svnno****@sourc*****
2010年 3月 6日 (土) 20:49:26 JST
ForkRevision: 1703
http://sourceforge.jp/projects/sie/svn/view?view=rev&revision=1703
Author: dhrname
Date: 2010-03-06 20:49:26 +0900 (Sat, 06 Mar 2010)
Log Message:
-----------
transform属性の実装
Modified Paths:
--------------
branches/ufltima/dom/svg.js
Modified: branches/ufltima/dom/svg.js
===================================================================
--- branches/ufltima/dom/svg.js 2010-03-06 11:08:24 UTC (rev 1702)
+++ branches/ufltima/dom/svg.js 2010-03-06 11:49:26 UTC (rev 1703)
@@ -964,7 +964,53 @@
if (!!CSS2Properties[name] || name.indexOf("-") > -1) {
tar._attributeStyle.setProperty(name, evt.newValue, "");
} else if (evt.relatedNode.localName === "id") { //xml:idあるいはid属性ならば
- } else if (name === "transform") {
+ tar.id = evt.newValue;
+ } else if (name === "transform" && !!evt.transform) {
+ var tft = evt.newValue, degR = /[\-\d\.e]+/g, _parseFloat = parseFloat;
+ var coma = tft.match(/[A-Za-z]+(?=\s*\()/g); //コマンド文字にマッチ translate
+ var list = tft.match(/\([^\)]+\)/g); //カッコ内のリストにマッチ (10 20 30...)
+ var a,b,c,d,e,f,lis,deg,rad,degli;
+ for (var j=0,cli=coma.length;j<cli;j++) {
+ var s = evt.currentTarget.createSVGTransform();
+ lis = list[j], com = coma[j];
+ deg = lis.match(degR);
+ degli = deg.length;
+ if (degli === 6) {
+ var cm = s.matrix;
+ cm.a = _parseFloat(deg[0]);
+ cm.b = _parseFloat(deg[1]);
+ cm.c = _parseFloat(deg[2]);
+ cm.d = _parseFloat(deg[3]);
+ cm.e = _parseFloat(deg[4]);
+ cm.f = _parseFloat(deg[5]);
+ } else {
+ if (degli === 3) {
+ var degz = _parseFloat(deg[0]);
+ s.setRotate(degz, _parseFloat(deg[1]), _parseFloat(degi[2]))
+ } else if (degli <= 2) {
+ switch (com) {
+ case "translate":
+ s.setTranslate(degz)
+ break;
+ case "scale":
+ s.setScale(degz, _parseFloat(deg[1] || deg[0]));
+ break;
+ case "rotate":
+ s.setRotate(degz);
+ break;
+ case "skewX":
+ s.setSkewX(degz);
+ break;
+ case "skewY":
+ s.setSkewY(degz);
+ break;
+ }
+ }
+ }
+ tar.transform.appendItem(s);
+ lis = com = deg = rad = null;
+ }
+ list = coma = mat = null;
} else if (name === "style") {
tar.style.cssText = evt.newValue;
} else if (name === "class") {
@@ -1004,7 +1050,7 @@
return s;
};
/*SVGMatrix*/ SVGSVGElement.prototype.createSVGMatrix = function(){
- var s = new SVGMatrix(1,0,0,1,0,0); //単位行列を作成
+ var s = new SVGMatrix(); //単位行列を作成
return s;
};
/*SVGRect*/ SVGSVGElement.prototype.createSVGRect = function(){
@@ -1183,8 +1229,8 @@
};
SVGPoint.prototype.matrixTransform = function(/*SVGMatrix*/ matrix ) {
//整数にしているのは、VMLの設計上、小数点を扱えないときがあるため
- var x = parseInt(matrix.a * this.x + matrix.c * this.y + matrix.e);
- var y = parseInt(matrix.b * this.x + matrix.d * this.y + matrix.f);
+ var x = parseInt(matrix.a * this.x + matrix.c * this.y + matrix.e, 10);
+ var y = parseInt(matrix.b * this.x + matrix.d * this.y + matrix.f, 10);
if (-1 < x && x < 1) {x=1;}
if (-1 < y && y < 1) {y=1;}
var s = new SVGPoint();
@@ -1201,26 +1247,7 @@
for (var prop in SVGStringList.prototype) { //prototypeのコピーで継承を行う
SVGPointList.prototype[prop] = SVGStringList.prototype[prop];
}
-//以下は独自の実装。リストを一度に処理できる
-SVGPointList.prototype._matrixTransform = function ( /*Matrix*/ ttm) {
- var F = this._list;
- for (var i = 0, Fli = F.length; i < Fli;) {
- if (isNaN(F[i])) { //コマンド文字は読み飛ばす
- ++i;
- continue;
- }
- var p = new SVGPoint();
- p.x = parseFloat(F[i]);
- p.y = parseFloat(F[i+1]);
- var pmt = p.matrixTransform(ttm);
- F[i++] = pmt.x;
- F[i++] = pmt.y;
- p = pmt = null;
- }
- var s = new SVGPointList();
- s._list = F;
- return s;
-}
+
/*SVGMatrix
*行列をあらわすオブジェクト。写像に用いる。以下のように表現できる
*[a c e]
@@ -1363,30 +1390,30 @@
SVGTransform.prototype = {
/*void*/ setMatrix : function(/*SVGMatrix*/ matrix ) {
this.type = SVGTransform.SVG_TRANSFORM_MATRIX;
- this.matrix.multiply(matrix);
+ this.matrix = this.matrix.multiply(matrix);
},
/*void*/ setTranslate : function(/*float*/ tx, /*float*/ ty ) {
this.type = SVGTransform.SVG_TRANSFORM_TRANSLATE;
- this.matrix.translate(tx, ty);
+ this.matrix = this.matrix.translate(tx, ty);
},
/*void*/ setScale : function(/*float*/ sx, /*float*/ sy ) {
this.type = SVGTransform.SVG_TRANSFORM_SCALE;
- this.matrix.scaleNonUniform(sx, sy);
+ this.matrix = this.matrix.scaleNonUniform(sx, sy);
},
/*void*/ setRotate : function(/*float*/ angle, /*float*/ cx, /*float*/ cy ) {
this.angle = angle;
this.type = SVGTransform.SVG_TRANSFORM_ROTATE;
- this.matrix.translate(cx, cy).rotate(angle).translate(-cx, -cy);
+ this.matrix = this.matrix.translate(cx, cy).rotate(angle).translate(-cx, -cy);
},
/*void*/ setSkewX : function(/*float*/ angle ) {
this.angle = angle;
this.type = SVGTransform.SVG_TRANSFORM_SKEWX;
- this.matrix.skewX(angle);
+ this.matrix = this.matrix.skewX(angle);
},
/*void*/ setSkewY : function(/*float*/ angle ) {
this.angle = angle;
this.type = SVGTransform.SVG_TRANSFORM_SKEWY;
- this.matrix.skewY(angle);
+ this.matrix = this.matrix.skewY(angle);
}
};