svnno****@sourc*****
svnno****@sourc*****
2010年 3月 13日 (土) 21:56:38 JST
ForkRevision: 1728
http://sourceforge.jp/projects/sie/svn/view?view=rev&revision=1728
Author: dhrname
Date: 2010-03-13 21:56:38 +0900 (Sat, 13 Mar 2010)
Log Message:
-----------
svg要素の枠の「画像切り取り」処理を追加
Modified Paths:
--------------
branches/ufltima/dom/svg.js
Modified: branches/ufltima/dom/svg.js
===================================================================
--- branches/ufltima/dom/svg.js 2010-03-13 12:07:38 UTC (rev 1727)
+++ branches/ufltima/dom/svg.js 2010-03-13 12:56:38 UTC (rev 1728)
@@ -972,6 +972,18 @@
function SVGGElement() {
SVGElement.apply(this, arguments);
this._tar = document.createElement("v:group");
+ /*以下の処理は、このpath要素ノードがDOMツリーに追加されて初めて、
+ *描画が開始されることを示す。つまり、appendChildで挿入されない限り、描画をしない。
+ */
+ this.addEventListener("DOMNodeInserted", function(evt){
+ var tar = evt.target;
+ if (evt.eventPhase === Event.BUBBLING_PHASE) {
+ return; //強制終了させる
+ }
+ tar.parentNode._tar.appendChild(tar._tar);
+ evt.target.addEventListener("DOMNodeInsertedIntoDocument", function(evt){
+ }, false);
+ }, false);
return this;
};
SVGGElement.constructor = SVGElement;
@@ -1102,7 +1114,7 @@
//HTML内のobject要素を探し出して、メソッドを結びつける
var obje = document.getElementsByTagName("object");
for (var i=0, objli=1;i<objli;++i) {
- var objei = {};//obje[i];
+ var objei = {style:{}};//obje[i];
xmlhttp.open("GET", "tiger.svg", true);//objei.getAttribute("data"), true);
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xmlhttp.onreadystatechange = function() {
@@ -1113,6 +1125,40 @@
str = xmlhttp.responseText.replace(/!DOCTYPE/,"!--").replace(/(dtd">|\]>)/,"-->");
doc.loadXML(str);
var s = DOMImplementation.createDocument("http://www.w3.org/2000/svg", "svg");
+ var tar = s.documentElement, sdt = s.documentElement._tar;
+ document.body.insertBefore(sdt, document.body.lastChild);
+ /*以下では、VMLの要素とHTMLのCSSのプロパティを用いて、背景を
+ *作り出す作業を行う。これは必須
+ */
+ var backr = document.createElement("v:rect");
+ var w = tar.viewport.width, h = tar.viewport.height, sw = tar.width.baseVal, sh = tar.height.baseVal;
+ backr.style.position = "absolute";
+ backr.style.width = w+ "px";
+ backr.style.height = h+ "px";
+ backr.style.zIndex = -1;
+ backr.stroked = "false";
+ backr.filled = "false";
+ tar._tar.appendChild(backr);
+ var trstyle = tar._tar.style;
+ var tpstyle = objei.style;
+ trstyle.visibility = "visible";
+ //以下、画像を切り取り
+ trstyle.overflow = "hidden";
+ var backrs = backr.currentStyle;
+ var viewWidth = w > sw ? sw : w, viewHeight = h > sh ? sh : h; //ウィンドウ枠の長さを決定する
+ var bfl = parseFloat(backrs.left), bft = parseFloat(backrs.top);
+ var bl = -tar._tx, bt = -tar._ty;
+ if (bfl !== 0 && !isNaN(bfl)) { //内部の図形にずれが生じたとき(isNaNはIE8でautoがデフォルト値のため）
+ bl = bfl;
+ tpstyle.left = -bl+ "px";
+ }
+ if (bft !== 0 && !isNaN(bfl)) {
+ bt = bft;
+ tpstyle.top = -bt+ "px";
+ }
+ var backright = bl + viewWidth + 1;
+ var backdown = bt + viewHeight + 1;
+ trstyle.clip = "rect(" +bt+ "px " +backright+ "px " +backdown+ "px " +bl+ "px)";
s.importNode(doc.documentElement, true);
return s;
};