Fork

[Sie-announce] SIEコード [1785] circle要素とline要素の実装

svnno****@sourc***** svnno****@sourc*****
2010年 4月 9日 (金) 23:43:25 JST

• 前の記事 [Sie-announce] SIEコード [1784] CSSプロパティの効率化のための並び替え
• 次の記事 [Sie-announce] SIEコード [1786] polygon要素とpolyline要素の実装
• 記事の並び順: [ 日付 ] [ スレッド ] [ 件名 ] [ 著者 ]

Revision: 1785
          http://sourceforge.jp/projects/sie/svn/view?view=rev&revision=1785
Author:   dhrname
Date:     2010-04-09 23:43:25 +0900 (Fri, 09 Apr 2010)

Log Message:
-----------
circle要素とline要素の実装

Modified Paths:
--------------
    branches/ufltima/dom/svg.js

Modified: branches/ufltima/dom/svg.js
===================================================================
--- branches/ufltima/dom/svg.js	2010-04-09 14:42:54 UTC (rev 1784)
+++ branches/ufltima/dom/svg.js	2010-04-09 14:43:25 UTC (rev 1785)
@@ -1163,7 +1163,7 @@
     var obje = document.getElementsByTagName("object");
     for (var i=0, objli=1;i<objli;++i) {
       var objei = {style:{}};//obje[i];
-      xmlhttp.open("GET", "../svggen/shapes-circle-01-t.svg", true);//objei.getAttribute("data"), true);
+      xmlhttp.open("GET", "../svggen/shapes-polyline-01-t.svg", true);//objei.getAttribute("data"), true);
       xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
       xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState === 4  &&  xmlhttp.status === 200) {
@@ -1741,7 +1741,8 @@
   }
   if (stroke.paintType === SVGPaint.SVG_PAINTTYPE_RGBCOLOR || stroke.paintType === SVGPaint.SVG_PAINTTYPE_CURRENTCOLOR) {
     var strokeElement = !!tar._strokeElement ? tar._strokeElement : document.createElement("v:stroke");
-    var sw = tar.ownerDocument.documentElement.createSVGLength(parseFloat(style.getPropertyValue("stroke-width")));//, Math.sqrt((w*w + h*h) / 2));
+    var sw = tar.ownerDocument.documentElement.createSVGLength();
+    sw.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, parseFloat(style.getPropertyValue("stroke-width")));
     var swx = sw.value * Math.sqrt(Math.abs(matrix._determinant()));
     strokeElement.setAttribute("weight", swx + "px");
     if (!stroke.uri) {
@@ -1778,8 +1779,8 @@
       strokeElement.setAttribute("dashstyle", strokedasharray);
       tsd = strs = null;
     }
-    el.appendChild(strokeElement);
     if (!!!tar._strokeElement) {
+      el.appendChild(strokeElement);
       tar._strokeElement = strokeElement;
     }
     sw = tsd = null;
@@ -2041,6 +2042,7 @@
         }
       }
     }
+    evt = null;
   }, false);
   /*以下の処理は、このpath要素ノードがDOMツリーに追加されて初めて、
    *描画が開始されることを示す。つまり、appendChildで挿入されない限り、描画をしない。
@@ -2101,6 +2103,7 @@
       NAIBU._setPaint(tar, matrix);
       evt = tar = w = h = matrix = dat = x = y = null;
     }, false);
+    evt = tar = null;
   }, false);
   return this;
 };
@@ -2263,6 +2266,7 @@
   /*readonly SVGAnimatedLength*/ this.height = new SVGAnimatedLength();
   /*readonly SVGAnimatedLength*/ this.rx = new SVGAnimatedLength();
   /*readonly SVGAnimatedLength*/ this.ry = new SVGAnimatedLength();
+  this.x.baseVal.value = this.y.baseVal.value = 0;
   this.addEventListener("DOMNodeInserted", function(evt){
     if (evt.eventPhase === Event.BUBBLING_PHASE) {
       return; //強制終了させる
@@ -2319,6 +2323,7 @@
       NAIBU._setPaint(tar, ctm);
       evt = tar = list = dat = ele = null;
     }, false);
+    evt = tar = null;
   }, false);
   return this;
 };
@@ -2331,6 +2336,7 @@
   /*readonly SVGAnimatedLength*/ this.cx = new SVGAnimatedLength();
   /*readonly SVGAnimatedLength*/ this.cy = new SVGAnimatedLength();
   /*readonly SVGAnimatedLength*/ this.r = new SVGAnimatedLength();
+  this.cx.baseVal.value = this.cy.baseVal.value = 0; //初期値を設定
   this.addEventListener("DOMNodeInserted", function(evt){
     if (evt.eventPhase === Event.BUBBLING_PHASE) {
       return; //強制終了させる
@@ -2369,6 +2375,7 @@
         NAIBU._setPaint(tar, ctm);
         evt = tar = list = dat = ele = null;
     }, false);
+    evt = tar = null;
   }, false);
   return this;
 };
@@ -2382,6 +2389,7 @@
   /*readonly SVGAnimatedLength*/ this.cy = new SVGAnimatedLength();
   /*readonly SVGAnimatedLength*/ this.rx = new SVGAnimatedLength();
   /*readonly SVGAnimatedLength*/ this.ry = new SVGAnimatedLength();
+  this.cx.baseVal.value = this.cy.baseVal.value = 0; //初期値を設定
   this.addEventListener("DOMNodeInserted", function(evt){
     if (evt.eventPhase === Event.BUBBLING_PHASE) {
       return; //強制終了させる
@@ -2389,7 +2397,38 @@
     var tar = evt.target;
     tar.parentNode._tar.appendChild(tar._tar);
     tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+      var tar = evt.target;
+      var cx = tar.cx.baseVal.value, cy = tar.cy.baseVal.value, rx = tar.rx.baseVal.value, ry = tar.ry.baseVal.value;
+      var top = cy - ry, left = cx - rx, bottom = cy + ry, right = cx + rx;
+      var rrx = rx * 0.55228, rry = ry * 0.55228;
+      var list = ["m", cx,top, "c", cx-rrx,top, left,cy-rry, left,cy, left,cy+rry, cx-rrx,bottom, cx,bottom, cx+rrx,bottom, right,cy+rry, right,cy, right,cy-rry, cx+rrx,top, cx,top, "x e"];
+      //以下は、配列listそのものをCTMで座標変換していく処理
+      var par = tar.ownerDocument.documentElement, ctm = tar.getScreenCTM();
+      for (var i=0, lili=list.length;i<lili;) {
+        if (isNaN(list[i])) { //コマンド文字は読み飛ばす
+          ++i;
+          continue;
+        }
+        var p = par.createSVGPoint();
+        p.x = list[i];
+        p.y = list[i+1];
+        var pmt = p.matrixTransform(ctm);
+        list[i] = pmt.x;
+        ++i;
+        list[i] = pmt.y;
+        ++i;
+        p = pmt = null;
+      }
+      var dat = list.join(" ");
+      //VMLに結び付けていく
+      var ele = tar._tar, vi = tar.ownerDocument.documentElement.viewport;
+      var w = vi.width, h = vi.hight;
+      ele.path = dat;
+      ele.coordsize = w + " " + h;
+      NAIBU._setPaint(tar, ctm);
+      evt = ele = tar = dat = list = ctm = w = h = null;
     }, false);
+    evt = tar = null;
   }, false);
   return this;
 };
@@ -2403,14 +2442,43 @@
   /*readonly SVGAnimatedLength*/ this.y1 = new SVGAnimatedLength();
   /*readonly SVGAnimatedLength*/ this.x2 = new SVGAnimatedLength();
   /*readonly SVGAnimatedLength*/ this.y2 = new SVGAnimatedLength();
+  this.x1.baseVal.value = this.y1.baseVal.value = this.x2.baseVal.value = this.y2.baseVal.value = 0;
   this.addEventListener("DOMNodeInserted", function(evt){
     if (evt.eventPhase === Event.BUBBLING_PHASE) {
       return; //強制終了させる
     }
     var tar = evt.target;
     tar.parentNode._tar.appendChild(tar._tar);
-    tar.target.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+    tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+      var tar = evt.target;
+      var list = ["m", tar.x1.baseVal.value, tar.y1.baseVal.value, "l", tar.x2.baseVal.value, tar.y2.baseVal.value];
+      //以下は、配列listそのものをCTMで座標変換していく処理
+      var par = tar.ownerDocument.documentElement, ctm = tar.getScreenCTM();
+      for (var i=0, lili=list.length;i<lili;) {
+        if (isNaN(list[i])) { //コマンド文字は読み飛ばす
+          ++i;
+          continue;
+        }
+        var p = par.createSVGPoint();
+        p.x = list[i];
+        p.y = list[i+1];
+        var pmt = p.matrixTransform(ctm);
+        list[i] = pmt.x;
+        ++i;
+        list[i] = pmt.y;
+        ++i;
+        p = pmt = null;
+      }
+      var dat = list.join(" ");
+      //VMLに結び付けていく
+      var ele = tar._tar, vi = tar.ownerDocument.documentElement.viewport;
+      var w = vi.width, h = vi.hight;
+      ele.path = dat;
+      ele.coordsize = w + " " + h;
+      NAIBU._setPaint(tar, ctm);
+     evt = ele = tar = dat = list = ctm = w = h = null;
     }, false);
+    evt = tar = null;
   }, false);
   return this;
 };
@@ -2422,6 +2490,18 @@
   this._tar = document.createElement("v:shape");
   //interface SVGAnimatedPoints
   /*readonly SVGPointList*/   this.animatedPoints = this.points = new SVGPointList();
+  this.addEventListener("DOMAttrModified", function(evt){
+    var tar = evt.target;
+    var tp = tar.points, par = tar.ownerDocument.documentElement;
+    var list = evt.newValue.replace(/^\s+|\s+$/g, "").split(/[\s,]+/);
+    for (var i=0, p, lili=list.length;i<lili;i+=2) {
+      p = par.createSVGPoint();
+      p.x = parseFloat(list[i]);
+      p.y = parseFloat(list[i+1]);
+      tp.appendItem(p);
+    }
+    evt = tar = list = tp = par = p = null;
+  }, false);
   this.addEventListener("DOMNodeInserted", function(evt){
     if (evt.eventPhase === Event.BUBBLING_PHASE) {
       return; //強制終了させる
@@ -2429,7 +2509,29 @@
     var tar = evt.target;
     tar.parentNode._tar.appendChild(tar._tar);
     tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+      var tar = evt.target, tp = tar.points;
+      //以下は、配列listそのものをCTMで座標変換していく処理
+      var ctm = tar.getScreenCTM();
+      for (var i=0, list = [], lili=tp.numberOfItems;i<lili;) {
+        var p = tp.getItem(i);
+        var pmt = p.matrixTransform(ctm);
+        list[i] = pmt.x;
+        ++i;
+        list[i] = pmt.y;
+        ++i;
+        p = pmt = null;
+      }
+      list.splice(2, 0, "l");
+      var dat = "m" + list.join(" ") + "e";
+      //VMLに結び付けていく
+      var ele = tar._tar, vi = tar.ownerDocument.documentElement.viewport;
+      var w = vi.width, h = vi.hight;
+      ele.path = dat;
+      ele.coordsize = w + " " + h;
+      NAIBU._setPaint(tar, ctm);
+      evt = ele = tar = dat = list = ctm = w = h = null;
     }, false);
+    evt = tar = null;
   }, false);
   return this;
 };
@@ -2449,6 +2551,7 @@
     tar.parentNode._tar.appendChild(tar._tar);
     tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
     }, false);
+    evt = tar = null;
   }, false);
   return this;
 };

• 前の記事 [Sie-announce] SIEコード [1784] CSSプロパティの効率化のための並び替え
• 次の記事 [Sie-announce] SIEコード [1786] polygon要素とpolyline要素の実装
• 記事の並び順: [ 日付 ] [ スレッド ] [ 件名 ] [ 著者 ]