svnno****@sourc*****
svnno****@sourc*****
2010年 4月 7日 (水) 23:48:38 JST
ForkRevision: 1782
http://sourceforge.jp/projects/sie/svn/view?view=rev&revision=1782
Author: dhrname
Date: 2010-04-07 23:48:37 +0900 (Wed, 07 Apr 2010)
Log Message:
-----------
1, NAIBU.setPaint関数の実装
2, circle要素の実装
Modified Paths:
--------------
branches/ufltima/dom/svg.js
Modified: branches/ufltima/dom/svg.js
===================================================================
--- branches/ufltima/dom/svg.js 2010-04-06 14:12:00 UTC (rev 1781)
+++ branches/ufltima/dom/svg.js 2010-04-07 14:48:37 UTC (rev 1782)
@@ -1051,7 +1051,9 @@
function SVGTitleElement() {
SVGElement.apply(this, arguments);
- this.ownerDocument.title = this.firstChild.nodeValue;
+ this.addEventListener("DOMCharacterDataModified", function(evt){
+ evt.target.ownerDocument.title = evt.target.firstChild.nodeValue;
+ }, false);
return this;
}
SVGTitleElement.constructor = SVGElement;
@@ -1161,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", "4wd.svg", true);//objei.getAttribute("data"), true);
+ xmlhttp.open("GET", "../svggen/shapes-circle-01-t.svg", true);//objei.getAttribute("data"), true);
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
@@ -1697,6 +1699,99 @@
for (var prop in SVGStringList.prototype) { //prototypeのコピーで継承を行う
SVGPathSegList.prototype[prop] = SVGStringList.prototype[prop];
};
+//仮のfill属性とstroke属性の処理
+NAIBU._setPaint = function(tar, matrix) {
+ /*以下では、スタイルシートを用いて、fill-とstroke-関連の
+ *処理を行う。SVGPaintインターフェースをも用いる
+ */
+ var style = tar.ownerDocument.defaultView.getComputedStyle(tar, "");
+ var el = tar._tar, fill = style.getPropertyCSSValue("fill"), stroke = style.getPropertyCSSValue("stroke");
+ if (fill.paintType === SVGPaint.SVG_PAINTTYPE_RGBCOLOR || fill.paintType === SVGPaint.SVG_PAINTTYPE_CURRENTCOLOR) {
+ var fillElement = !!tar._fillElement ? tar._fillElement : document.createElement("v:fill");
+ var fc = fill.rgbColor, num = CSSPrimitiveValue.CSS_NUMBER;
+ fillElement.setAttribute("color", "rgb(" +fc.red.getFloatValue(num)+ "," +fc.green.getFloatValue(num)+ "," +fc.blue.getFloatValue(num)+ ")");
+ var fillOpacity = parseFloat(style.getPropertyValue("fill-opacity")) * parseFloat(style.getPropertyValue("opacity")); //opacityを掛け合わせる
+ if (fillOpacity < 1) {
+ fillElement.setAttribute("opacity", fillOpacity+"");
+ }
+ if (!!!tar._fillElement) {
+ el.appendChild(fillElement);
+ tar._fillElement = fillElement; //キャッシュを作る
+ }
+ fc = 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, evtt._ttar = tar;
+ t.dispatchEvent(evtt);
+ if (t.localName !== "radialGradient" && !!!tar._fillElement) {
+ el.appendChild(evtt._tar);
+ tar._fillElement = evtt._tar; //キャッシュを作る
+ }
+ t = evtt = null;
+ }
+ } else {
+ el.filled = "false";
+ }
+ 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 swx = sw.value * Math.sqrt(Math.abs(matrix._determinant()));
+ strokeElement.setAttribute("weight", swx + "px");
+ if (!stroke.uri) {
+ var fc = stroke.rgbColor, num = CSSPrimitiveValue.CSS_NUMBER;
+ strokeElement.setAttribute("color", "rgb(" +fc.red.getFloatValue(num)+ "," +fc.green.getFloatValue(num)+ "," +fc.blue.getFloatValue(num)+ ")");
+ var strokeOpacity = parseFloat(style.getPropertyValue("stroke-opacity")) * parseFloat(style.getPropertyValue("opacity")); //opacityを掛け合わせる
+ if (swx < 1) {
+ strokeOpacity *= swx; //太さが1px未満なら色を薄くする
+ }
+ if (strokeOpacity < 1) {
+ strokeElement.setAttribute("opacity", strokeOpacity);
+ }
+ fc = num = strokeOpacity = null;
+ }
+ strokeElement.setAttribute("miterlimit", style.getPropertyValue("stroke-miterlimit"));
+ strokeElement.setAttribute("joinstyle", style.getPropertyValue("stroke-linejoin"));
+ if (style.getPropertyValue("stroke-linecap") === "butt") {
+ strokeElement.setAttribute("endcap", "flat");
+ } else {
+ strokeElement.setAttribute("endcap", style.getPropertyValue("stroke-linecap"));
+ }
+ var tsd = style.getPropertyValue("stroke-dasharray");
+ if (tsd !== "none") {
+ if (tsd.indexOf(",") > 0) { //コンマ区切りの文字列の場合
+ var strs = tsd.split(",");
+ for (var i = 0, sli = strs.length; i < sli; ++i) {
+ strs[i] = Math.ceil(parseFloat(strs[i]) / parseFloat(style.getPropertyValue("stroke-width"))); //精密ではないので注意
+ }
+ var strokedasharray = strs.join(" ");
+ if (strs.length % 2 === 1) {
+ strokedasharray += " " + strokedasharray;
+ }
+ }
+ strokeElement.setAttribute("dashstyle", strokedasharray);
+ tsd = strs = null;
+ }
+ el.appendChild(strokeElement);
+ if (!!!tar._strokeElement) {
+ tar._strokeElement = strokeElement;
+ }
+ sw = tsd = null;
+ } else {
+ el.stroked = "false";
+ }
+ var cursor = style.getPropertyValue("cursor");
+ if (cursor !== "default") {
+ el.style.cursor = cursor;
+ }
+ style = cursor = null;
+};
function SVGPathElement() {
SVGElement.apply(this, arguments);
@@ -2003,96 +2098,8 @@
var w = vi.width.baseVal.value, h = vi.height.baseVal.value;
tar._tar.path = dat + " e";
tar._tar.coordsize = w + " " + h;
- /*以下では、スタイルシートを用いて、fill-とstroke-関連の
- *処理を行う。SVGPaintインターフェースをも用いる
- */
- var style = tar.ownerDocument.defaultView.getComputedStyle(tar, "");
- var el = tar._tar, fill = style.getPropertyCSSValue("fill"), stroke = style.getPropertyCSSValue("stroke");
- if (fill.paintType === SVGPaint.SVG_PAINTTYPE_RGBCOLOR || fill.paintType === SVGPaint.SVG_PAINTTYPE_CURRENTCOLOR) {
- var fillElement = !!tar._fillElement ? tar._fillElement : document.createElement("v:fill");
- var fc = fill.rgbColor, num = CSSPrimitiveValue.CSS_NUMBER;
- fillElement.setAttribute("color", "rgb(" +fc.red.getFloatValue(num)+ "," +fc.green.getFloatValue(num)+ "," +fc.blue.getFloatValue(num)+ ")");
- var fillOpacity = parseFloat(style.getPropertyValue("fill-opacity")) * parseFloat(style.getPropertyValue("opacity")); //opacityを掛け合わせる
- if (fillOpacity < 1) {
- fillElement.setAttribute("opacity", fillOpacity+"");
- }
- if (!!!tar._fillElement) {
- el.appendChild(fillElement);
- tar._fillElement = fillElement; //キャッシュを作る
- }
- fc = 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, evtt._ttar = tar;
- t.dispatchEvent(evtt);
- if (t.localName !== "radialGradient" && !!!tar._fillElement) {
- el.appendChild(evtt._tar);
- tar._fillElement = evtt._tar; //キャッシュを作る
- }
- t = evtt = null;
- }
- } else {
- el.filled = "false";
- }
- 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 swx = sw.value * Math.sqrt(Math.abs(matrix._determinant()));
- strokeElement.setAttribute("weight", swx + "px");
- if (!stroke.uri) {
- var fc = stroke.rgbColor, num = CSSPrimitiveValue.CSS_NUMBER;
- strokeElement.setAttribute("color", "rgb(" +fc.red.getFloatValue(num)+ "," +fc.green.getFloatValue(num)+ "," +fc.blue.getFloatValue(num)+ ")");
- var strokeOpacity = parseFloat(style.getPropertyValue("stroke-opacity")) * parseFloat(style.getPropertyValue("opacity")); //opacityを掛け合わせる
- if (swx < 1) {
- strokeOpacity *= swx; //太さが1px未満なら色を薄くする
- }
- if (strokeOpacity < 1) {
- strokeElement.setAttribute("opacity", strokeOpacity);
- }
- fc = num = strokeOpacity = null;
- }
- strokeElement.setAttribute("miterlimit", style.getPropertyValue("stroke-miterlimit"));
- strokeElement.setAttribute("joinstyle", style.getPropertyValue("stroke-linejoin"));
- if (style.getPropertyValue("stroke-linecap") === "butt") {
- strokeElement.setAttribute("endcap", "flat");
- } else {
- strokeElement.setAttribute("endcap", style.getPropertyValue("stroke-linecap"));
- }
- var tsd = style.getPropertyValue("stroke-dasharray");
- if (tsd !== "none") {
- if (tsd.indexOf(",") > 0) { //コンマ区切りの文字列の場合
- var strs = tsd.split(",");
- for (var i = 0, sli = strs.length; i < sli; ++i) {
- strs[i] = Math.ceil(parseFloat(strs[i]) / parseFloat(style.getPropertyValue("stroke-width"))); //精密ではないので注意
- }
- var strokedasharray = strs.join(" ");
- if (strs.length % 2 === 1) {
- strokedasharray += " " + strokedasharray;
- }
- }
- strokeElement.setAttribute("dashstyle", strokedasharray);
- tsd = strs = null;
- }
- el.appendChild(strokeElement);
- if (!!!tar._strokeElement) {
- tar._strokeElement = strokeElement;
- }
- sw = tsd = null;
- } else {
- el.stroked = "false";
- }
- var cursor = style.getPropertyValue("cursor");
- if (cursor !== "default") {
- el.style.cursor = cursor;
- }
- cursor = w = h = matrix = dat = x = y = null;
+ NAIBU._setPaint(tar, matrix);
+ evt = tar = w = h = matrix = dat = x = y = null;
}, false);
}, false);
return this;
@@ -2249,6 +2256,7 @@
function SVGRectElement() {
SVGElement.apply(this, arguments);
+ this._tar = document.createElement("v:shape");
/*readonly SVGAnimatedLength*/ this.x = new SVGAnimatedLength();
/*readonly SVGAnimatedLength*/ this.y = new SVGAnimatedLength();
/*readonly SVGAnimatedLength*/ this.width = new SVGAnimatedLength();
@@ -2259,17 +2267,19 @@
if (evt.eventPhase === Event.BUBBLING_PHASE) {
return; //強制終了させる
}
- this.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+ var tar = evt.target;
+ tar.parentNode._tar.appendChild(tar._tar);
+ tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
var tar = evt.target;
var rx = tar.hasAttributeNS(null, "rx"), ry = tar.hasAttributeNS(null, "ry");
- var x = this.x.baseVal.value, y = this.y.baseVal.value, xw = x + this.width.baseVal.value, yh = y + this.height.baseVal.value;
+ var x = tar.x.baseVal.value, y = tar.y.baseVal.value, xw = x + tar.width.baseVal.value, yh = y + tar.height.baseVal.value;
var list;
if (rx || ry) {
- var thrx = this.rx.baseVal, thry = thry.baseVal;
+ var thrx = tar.rx.baseVal, thry = tar.ry.baseVal;
thrx.value = rx ? thrx.value : thry.value;
thry.value = ry ? thry.value : thrx.value;
//rx属性が幅より大きければ、幅の半分を属性に設定(ry属性は高さと比較する）
- var twidth = this.width.baseVal.value, theight = this.height.baseVal.value;
+ var twidth = tar.width.baseVal.value, theight = tar.height.baseVal.value;
if (thrx.value > twidth / 2) {
thrx.value = twidth / 2;
}
@@ -2290,12 +2300,14 @@
++i;
continue;
}
- var p = par.createSVGPoint(list[i], list[i+1]);
+ var p = par.createSVGPoint();
+ p.x = list[i];
+ p.y = list[i+1];
var pmt = p.matrixTransform(ctm);
- ++i;
list[i] = pmt.x;
++i;
list[i] = pmt.y;
+ ++i;
p = pmt = null;
}
var dat = list.join(" ");
@@ -2304,7 +2316,8 @@
var w = vi.width, h = vi.hight;
ele.path = dat;
ele.coordsize = w + " " + h;
- list = dat = ele = null;
+ NAIBU._setPaint(tar, ctm);
+ evt = tar = list = dat = ele = null;
}, false);
}, false);
return this;
@@ -2314,6 +2327,7 @@
function SVGCircleElement() {
SVGElement.apply(this, arguments);
+ this._tar = document.createElement("v:shape");
/*readonly SVGAnimatedLength*/ this.cx = new SVGAnimatedLength();
/*readonly SVGAnimatedLength*/ this.cy = new SVGAnimatedLength();
/*readonly SVGAnimatedLength*/ this.r = new SVGAnimatedLength();
@@ -2321,9 +2335,11 @@
if (evt.eventPhase === Event.BUBBLING_PHASE) {
return; //強制終了させる
}
- this.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+ var tar = evt.target;
+ tar.parentNode._tar.appendChild(tar._tar);
+ tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
var tar = evt.target;
- var cx = this.cx.baseVal.value, cy = this.cy.baseVal.value, rx = ry = this.r.baseVal.value;
+ var cx = tar.cx.baseVal.value, cy = tar.cy.baseVal.value, rx = ry = tar.r.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"];
@@ -2334,12 +2350,14 @@
++i;
continue;
}
- var p = par.createSVGPoint(list[i], list[i+1]);
+ var p = par.createSVGPoint();
+ p.x = list[i];
+ p.y = list[i+1];
var pmt = p.matrixTransform(ctm);
- ++i;
list[i] = pmt.x;
++i;
list[i] = pmt.y;
+ ++i;
p = pmt = null;
}
var dat = list.join(" ");
@@ -2348,8 +2366,8 @@
var w = vi.width, h = vi.hight;
ele.path = dat;
ele.coordsize = w + " " + h;
- list = dat = ele = null;
- dat = list = pl = plm = w = h = null; //解放
+ NAIBU._setPaint(tar, ctm);
+ evt = tar = list = dat = ele = null;
}, false);
}, false);
return this;
@@ -2359,6 +2377,7 @@
function SVGEllipseElement() {
SVGElement.apply(this, arguments);
+ this._tar = document.createElement("v:shape");
/*readonly SVGAnimatedLength*/ this.cx = new SVGAnimatedLength();
/*readonly SVGAnimatedLength*/ this.cy = new SVGAnimatedLength();
/*readonly SVGAnimatedLength*/ this.rx = new SVGAnimatedLength();
@@ -2367,7 +2386,9 @@
if (evt.eventPhase === Event.BUBBLING_PHASE) {
return; //強制終了させる
}
- this.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+ var tar = evt.target;
+ tar.parentNode._tar.appendChild(tar._tar);
+ tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
}, false);
}, false);
return this;
@@ -2377,6 +2398,7 @@
function SVGLineElement() {
SVGElement.apply(this, arguments);
+ this._tar = document.createElement("v:shape");
/*readonly SVGAnimatedLength*/ this.x1 = new SVGAnimatedLength();
/*readonly SVGAnimatedLength*/ this.y1 = new SVGAnimatedLength();
/*readonly SVGAnimatedLength*/ this.x2 = new SVGAnimatedLength();
@@ -2385,7 +2407,9 @@
if (evt.eventPhase === Event.BUBBLING_PHASE) {
return; //強制終了させる
}
- this.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+ var tar = evt.target;
+ tar.parentNode._tar.appendChild(tar._tar);
+ tar.target.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
}, false);
}, false);
return this;
@@ -2395,13 +2419,16 @@
function SVGPolylineElement() {
SVGElement.apply(this, arguments);
+ this._tar = document.createElement("v:shape");
//interface SVGAnimatedPoints
/*readonly SVGPointList*/ this.animatedPoints = this.points = new SVGPointList();
this.addEventListener("DOMNodeInserted", function(evt){
if (evt.eventPhase === Event.BUBBLING_PHASE) {
return; //強制終了させる
}
- this.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+ var tar = evt.target;
+ tar.parentNode._tar.appendChild(tar._tar);
+ tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
}, false);
}, false);
return this;
@@ -2411,13 +2438,16 @@
function SVGPolygonElement() {
SVGElement.apply(this, arguments);
+ this._tar = document.createElement("v:shape");
//interface SVGAnimatedPoints
/*readonly SVGPointList*/ this.animatedPoints = this.points = new SVGPointList();
this.addEventListener("DOMNodeInserted", function(evt){
if (evt.eventPhase === Event.BUBBLING_PHASE) {
return; //強制終了させる
}
- this.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
+ var tar = evt.target;
+ tar.parentNode._tar.appendChild(tar._tar);
+ tar.addEventListener("DOMNodeInsertedIntoDocument", function(evt) {
}, false);
}, false);
return this;