[Sie-announce] SIEコード [1773] グラデーション関連の実装

Back to archive index

svnno****@sourc***** svnno****@sourc*****
2010年 4月 1日 (木) 23:09:29 JST


Revision: 1773
          http://sourceforge.jp/projects/sie/svn/view?view=rev&revision=1773
Author:   dhrname
Date:     2010-04-01 23:09:29 +0900 (Thu, 01 Apr 2010)

Log Message:
-----------
グラデーション関連の実装

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

Modified: branches/ufltima/dom/svg.js
===================================================================
--- branches/ufltima/dom/svg.js	2010-04-01 12:06:16 UTC (rev 1772)
+++ branches/ufltima/dom/svg.js	2010-04-01 14:09:29 UTC (rev 1773)
@@ -1156,7 +1156,7 @@
     var obje = document.getElementsByTagName("object");
     for (var i=0, objli=1;i<objli;++i) {
       var objei = {style:{}};//obje[i];
-      xmlhttp.open("GET", "tiger.svg", true);//objei.getAttribute("data"), true);
+      xmlhttp.open("GET", "4wd.svg", true);//objei.getAttribute("data"), true);
       xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
       xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState === 4  &&  xmlhttp.status === 200) {
@@ -1950,7 +1950,7 @@
       return; //強制終了させる
     }
     tar.parentNode._tar.appendChild(tar._tar);
-    evt.target.addEventListener("DOMNodeInsertedIntoDocument", function(evt){
+    tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt){
       /*以下の処理は、normalizedpathSegListとCTMに基づいて、
        *SVGのd属性をVMLに変換していく処理である。
        */
@@ -2016,6 +2016,19 @@
           tar._fillElement = fillElement; //キャッシュを作る
         }
         fc = isRadial = fillOpacity = null;
+      } else if (fill.uri) {
+        /*以下では、Gradation関連の要素に、イベントを渡すことで、
+         *この要素の、グラデーション描画を行う
+         */
+        var t = tar.ownerDocument.getElementById(fill.uri);
+        if (t) {
+          var evtt = tar.ownerDocument.createEvent("MutationEvents");
+          evtt.initMutationEvent("DOMNodeInsertedIntoDocument", false, false, null, null, null, null, null);
+          evtt._tar = !!tar._fillElement ? tar._fillElement : document.createElement("v:fill");
+          evtt._style = style;
+          t.dispatchEvent(evtt);
+          t = evtt = null;
+        }
       } else {
         el.filled = "false";
       }
@@ -2587,38 +2600,43 @@
   /*readonly SVGAnimatedTransformList*/ this.gradientTransform = new SVGAnimatedTransformList();
   /*readonly SVGAnimatedEnumeration*/   this.spreadMethod = new SVGAnimatedEnumeration();
   this.addEventListener("DOMNodeInserted", function(evt) {
-    var grad = evt.target, ele = evt._tar; //eleはv:fill要素やv:stroke要素のノードを収納
-    if (!!!ele) { //まだ、path要素などが設定されていない場合
+    if (evt.eventPhase === Event.BUBBLING_PHASE) {
       return;
     }
-    if (grad) {
-      var grad2 = grad;
-      while (grad2 && !grad2.hasChildNodes()) { //stopを子要素に持つgradient要素を探す
-        grad2.getAttributeNS("http://www.w3.org/xlink/1999", "xlink:href").match(/#(.+)/);
-        grad2 = evt.target.ownerDocument.getElementById(RegExp.$1);
-      }
-      var stops = grad2.getElementsByTagNameNS(null, "stop");
-      if (!stops) {
-        grad = grad2 = stops = null;
+    evt.target.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+      var grad = evt.target, ele = evt._tar, t = evt._style; //eleはv:fill要素やv:stroke要素のノード、tはラップした要素ノードのスタイルを収納
+      if (!!!ele) { //まだ、path要素などが設定されていない場合
         return;
       }
-      var length = stops.length;
-      var color = [], colors = [], opacity = [];
-      for (var i = 0; i < length; ++i) {
-        var stop = stops[i];
-        color[i] = this.color(stop.style.stopcolor || stop.getAttribute("stopcolor")) || "black";
-        colors[i] = stop.getAttribute("offset") + " " + color[i];
-        opacity[i] = (stop.style.stopopacity || stop.getAttribute("stopopacity") || 1) * this.fillopacity * this.opacity;
+      if (grad) {
+        var grad2 = grad;
+        while (grad2 && !grad2.hasChildNodes()) { //stopを子要素に持つgradient要素を探す
+          grad2.getAttributeNS("http://www.w3.org/xlink/1999", "xlink:href").match(/#(.+)/);
+          grad2 = evt.target.ownerDocument.getElementById(RegExp.$1);
+        }
+        var stops = grad2.getElementsByTagNameNS("http://www.w3.org/svg/2000", "stop");
+        if (!stops) {
+          grad = grad2 = stops = null;
+          return;
+        }
+        var length = stops.length;
+        var color = [], colors = [], opacity = [];
+        for (var i = 0; i < length; ++i) {
+          var stop = stops[i];
+          color[i] = stop.style.getPropertyValue("stop-color");
+          colors[i] = stop.offset + " " + color[i];
+          opacity[i] = (parseFloat(stop.style.getPropertyVlaue("stop-opacity")) || 1) * parseFloat(t.getPropertyValue("fill-opacity")) * parseFloat(t.getPropertyValue("opacity"));
+        }
+        ele.setAttribute("method", "none");
+        ele.setAttribute("color",  color[0]);
+        ele.setAttribute("color2", color[length-1]);
+        ele.setAttribute("colors", colors.join(","));
+        // When colors attribute is used, the meanings of opacity and o:opacity2 are reversed.
+        ele.setAttribute("opacity", opacity[length-1]+ "");
+        ele.setAttribute("o:opacity2", opacity[0]+ "");
+        grad = ele = stops = lengh = color = colors = opacity = null;        
       }
-      ele.setAttribute("method", "none");
-      ele.setAttribute("color",  color[0]);
-      ele.setAttribute("color2", color[length-1]);
-      ele.setAttribute("colors", colors.join(","));
-      // When colors attribute is used, the meanings of opacity and o:opacity2 are reversed.
-      ele.setAttribute("opacity", opacity[length-1]+ "");
-      ele.setAttribute("o:opacity2", opacity[0]+ "");
-      grad = ele = stops = lengh = color = colors = opacity = null;
-    }
+    }, false);
   }, false);
   return this;
 };




Sie-announce メーリングリストの案内
Back to archive index