SIEコード [2016] 1, radialGradient要素の実装 (Sie-announce) - SIE

Revision: 2016
          http://sourceforge.jp/projects/sie/svn/view?view=rev&revision=2016
Author:   dhrname
Date:     2010-09-25 20:58:00 +0900 (Sat, 25 Sep 2010)

Log Message:
-----------
1, radialGradient要素の実装
2, グラデーションに関して、「オブジェクトがnullまたはundefinedです」という警告が出るバグの修正

Modified Paths:
--------------
    branches/06x/061/org/w3c/dom/svg.js

Modified: branches/06x/061/org/w3c/dom/svg.js
===================================================================

--- branches/06x/061/org/w3c/dom/svg.js	2010-09-25 11:04:05 UTC (rev 2015)
+++ branches/06x/061/org/w3c/dom/svg.js	2010-09-25 11:58:00 UTC (rev 2016)
@@ -308,10 +308,27 @@
 /*interface SVGLocatable*/
 /*SVGRect*/   SVGElement.prototype.getBBox = function(){
   var s = new SVGRect();
-  s.x      = this._tar.clientLeft;
-  s.y      = this._tar.clientTop;
-  s.width  = this._tar.clientWidth;
-  s.height = this._tar.clientHeight;
+  var data = this._tar.path.value, vi = this.ownerDocument.documentElement;
+  var el = vi.width.baseVal.value, et = vi.height.baseVal.value, er = 0, eb = 0;
+  /*要素の境界領域を求める（四隅の座標を求める）
+   *etは境界領域の上からビューポート(例えばsvg要素）の上端までの距離であり、eｂは境界領域の下からビューポートの下端までの距離
+   *elは境界領域の左からビューポートの左端までの距離であり、erは境界領域の右からビューポートの右端までの距離
+   */
+  var degis = data.match(/[0-9\-]+/g);
+  for (var i=0,degisli=degis.length;i<degisli;i+=2) {
+    var nx = parseInt(degis[i]), ny = parseInt(degis[i+1]);
+    el = el > nx ? nx : el;
+    et = et > ny ? ny : et;
+    er = er > nx ? er : nx;
+    eb = eb > ny ? eb : ny;
+    nx = ny = null;
+  }
+  data = degis = null;
+  s.x      = et;
+  s.y      = el;
+  s.width  = er - el;
+  s.height = eb - et;
+  el = et = er = eb = vi = null;
   return s;
 };
 
@@ -3543,7 +3560,13 @@
         }
       }
       var color = style.getPropertyValue("fill");
-      tar._tar.style.color = color;
+      if (color === "none"){
+        tar._tar.style.color = "transparent";
+      } else if (color.indexOf("url") === -1) {
+        tar._tar.style.color = color;
+      } else {
+        tar._tar.style.color = "black";
+      }
       var cursor = style.getPropertyValue("cursor");
       if (cursor !== "auto" && cursor !== "") {
         tar._tar.style.cursor = cursor;
@@ -3757,8 +3780,13 @@
     if (grad) {
       var grad2 = grad;
       while (grad2 && !grad2.hasChildNodes()) { //stopを子要素に持つgradient要素を探す
-        grad2.getAttributeNS("http://www.w3.org/1999/xlink", "href").match(/#(.+)/);
-        grad2 = evt.target.ownerDocument.getElementById(RegExp.$1);
+        var href = grad2.getAttributeNS("http://www.w3.org/1999/xlink", "href");
+        if (href) {
+          href.match(/#(.+)/);
+          grad2 = evt.target.ownerDocument.getElementById(RegExp.$1);
+        } else {
+          break;
+        }
       }
       var stops = grad2.getElementsByTagNameNS("http://www.w3.org/2000/svg", "stop");
       if (!stops) {
@@ -3841,23 +3869,19 @@
        *四角だとおかしな模様が出てしまう。以下はそれを避ける処理
        */
       var cx = grad.cx.baseVal.value, cy = grad.cy.baseVal.value;
-      var r = rx = ry = grad.r.baseVal.value;
+      var r = grad.r.baseVal.value, rx, ry;
+      rx = ry = r;
       var tarrect = tar.getBBox();
       var vi = tar.ownerDocument.documentElement;
       var el = vi.width.baseVal.value, et = vi.height.baseVal.value, er = 0, eb = 0;
-      var data = tar._tar.path.value;
       var units = grad.getAttributeNS(null, "gradientUnits");
       if (!units || units === "objectBoundingBox") {
         //%の場合は小数点に変換(10% -> 0.1)
         cx = cx > 1 ? cx/100 : cx; cy = cy > 1 ? cy/100 : cy; r = r > 1 ? r/100 : r;
         //要素の境界領域を求める（四隅の座標を求める）
-        var nx = tarrect.x, ny = tarrect.y;
-        el = el > nx ? nx : el;
-        et = et > ny ? ny : et;
-        er = er > nx ? er : nx;
-        eb = eb > ny ? eb : ny;
-        nx = ny = null;
-        cx = cx*(er - el) + el; cy = cy*(eb - et) + et; rx = r*(er - el); ry = r*(eb - et);
+        var nx = tarrect.x, ny = tarrect.y, wid = tarrect.width, hei = tarrect.height;
+        cx = cx*wid + nx; cy = cy*hei + ny; rx = r*wid; ry = r*hei;
+        nx = ny = wid = hei = null;
       }
       var gt = grad.getAttributeNS(null, "gradientTransform");
       if (gt) {
@@ -3893,6 +3917,7 @@
       bstyle.filter = "progid:DXImageTransform.Microsoft.Compositor";
       background.filters.item('DXImageTransform.Microsoft.Compositor').Function = 23;
       var circle = '<v:shape style="display:inline-block; position:relative; antialias:false; top:0px; left:0px;" coordsize="' +w+ ' ' +h+ '" path="' +ellipse+ '" stroked="f">' +ele.outerHTML+ '</v:shape>';
+      var data = tar._tar.path.value;
       background.innerHTML = '<v:shape style="display:inline-block; position:relative; top:0px; left:0px;" coordsize="' +w+ ' ' +h+ '" path="' +data+ '" stroked="f" fillcolor="' +grad._color[grad._color.length-1]+ '" ></v:shape>';
       background.filters[0].apply();
       background.innerHTML = circle;
@@ -4828,7 +4853,8 @@
   tref:            SVGTRefElement,
   use:             SVGUseElement,
   view:            SVGViewElement,
-  vkern:           SVGVKernElement
+  vkern:           SVGVKernElement,
+  pattern:         SVGPatternElement
 };
 
 /*以下は、getComputedStyleメソッドで使うために、CSS2Propertiesの_listプロパティに、



Fork

[Sie-announce] SIEコード [2016] 1, radialGradient要素の実装