やったね!
==What's this? You can draw easyly SVG by JavaScript by this 'svgDraw.js'. Those graphics are drawn without using Microsoft VML, Adobe Flash, Sun Java, JavaScript canvas. このスクリプトは本質的にはpoemlの為に開発している。 SVGのプリミティヴな扱いを提供する。更に高度なインターフェイスが必要な場合は、当スクリプトの上に構築すればよい。 また、当スクリプトは如何なるライブラリにも依存していない。 汚染するグローバル変数は、c4sey と $y のみで、故にc4sey.jsの一部として使うことも、可能である。 ==Features そう簡単にではないが、HTML中にSVGを直接書きだせる。 HTMLや、ブラウザに特化した処理は極めて少ない為、HTML以外での操作、ブラウザ外での使用も容易である。 使用の想定状況は、Web上でグラフィックス処理を行う事。 SVGはHTML Canvasより柔軟且つ高度である。これが簡単に使える。 スクリプトには、プロトタイプチェーン状の書き方を行う。故にsvgDraw.jsはjQueryに影響を受けている。 ==Basic usage 先ずSVG Canvasを作成する。 var svgCanvas = $y.svgDraw(document.getElementById("canvas")); 初期化(width, height, viewBox属性を追加)。viewBoxは殆どの場合省略化。 svgCanvas.width(500).height(400).viewBox("0 0 500 400"); SVG要素を作成。 var svgTag = $y.svgDraw.svg.fill("#f00").circle({cx:100, cy:70, r:50}) .stroke("none").text({x:100, y:130,}, "String"); 描く。 svgCanvas.draw(svgTag);
デモ
http://c4se.sakura.ne.jp/bi_laboratory/poeml/svgDraw/svgDraw.html
縦書きプログラムへの実装例
http://c4se.sakura.ne.jp/bi_laboratory/poeml/svgTategaki.html
Opera9.63, Opera10.00alpha, Google Chrome1.0にて動作確認。
↓本体↓
/* * c4se project * svgDraw.js 0.2.1 - 20090208 * * project name: poeml - poems in electrocity * project page: http://c4se.sakura.ne.jp/bi_laboratory/poeml/poeml.html * project leader: Siki Asai * lunatic_faily@yahoo.co.jp * http://c4se.sakura.ne.jp/si_index.html * script author: Nemu Inoue * utakata.c4se@gmail.com * http://c4se.sakura.ne.jp/ne_index.html * * ==License * <c4seFCL 0.1> * * ==What's this? * You can draw easyly SVG by JavaScript by this 'svgDraw.js'. * Those graphics are drawn without using Microsoft VML, Adobe Flash, Sun Java, HTML Canvas. */ if(!Object.prototype._className){ Object.prototype._className = "Object"; Array.prototype._className = "Array"; String.prototype._className = "String"; Date.prototype._className = "Date"; Number.prototype._className = "Number"; Boolean.prototype._className = "Boolean"; Function.prototype._className = "Function"; RegExp.prototype._className = "RegExp"; Error.prototype._className = "Error"; EvalError.prototype._className = "EvalError"; ReferenceError.prototype._className = "ReferenceError"; RangeError.prototype._className = "RangeError"; SyntaxError.prototype._className = "SyntaxError"; TypeError.prototype._className = "TypeError"; URIError.prototype._className = "URIError"; NodeList.prototype._className = "NodeList"; }; if(!Array.prototype.forEach) Array.prototype.forEach = function(f, o){ if(!o) o = undefined; for(var i=0; i<this.length; i++){ if(this[i] === undefined) continue; f.call(o, this[i], i, this); } return this; }; if(!NodeList.prototype.toArray) NodeList.prototype.toArray = function(){ var a = new Array(); for(var i=0, l=this.length; i<l; ++i) a.push(this[i]); return a; }; try{c4sey}catch(e){c4sey = {}; $y = c4sey}; if(!c4sey.mixin) c4sey.mixin = function(hash1, hash2){ for(var prop in hash2) hash1[prop] = hash2[prop]; return hash1; }; (function($y){ var _doc = document; var _ns = "http://www.w3.org/2000/svg"; /*var _nss = { svg: "http://www.w3.org/2000/svg", xlinkns: "http://www.w3.org/1999/xlink", xhtml: "http://www.w3.org/1999/xhtml", mathml: "http://www.w3.org/1998/Math/MathML" }; var _defalt_style = { fill:"#000", opacity:1.0, stroke:"#000", "stroke-width":1, "stroke-opacity":1.0 }; var now_style = { fill:"#000", opacity:1.0, stroke:"#000", "stroke-width":1, "stroke-opacity":1.0 };*/ $y.svgDraw = function(node){return new $y.svgDraw.fn.init(node);}; $y.svgDraw.fn = $y.svgDraw.prototype = { _className: "$y.svgDraw", init: function(node){ node = node || _doc.body; node.appendChild(_doc.createElementNS(_ns, "svg")).setAttribute("class", "svgDraw"); this._private = {}; this._private.canvas = node.lastChild; this._private.layerid = new Array(); return this; }, draw: function(/*Element | ElementArray ...*/){ for(var i=0, l=arguments.length; i<l; ++i){ if(arguments[i]._className == "$y.svgDraw.svg") arguments[i] = arguments[i].out(); if(arguments[i]._className == "Array") arguments[i].forEach(function(elm){ this._private.canvas.appendChild(elm); }, this); else this._private.canvas.appendChild(arguments[i]); } return this; }, width: function(num){ this._private.canvas.setAttribute("width", num); return this; }, height: function(num){ this._private.canvas.setAttribute("height", num); return this; }, viewBox: function(nums){ this._private.canvas.setAttribute("viewBox", nums); return this; }, id: function(idname){ return this._private.canvas.getElementById(idname); }, class: function(classname){ }, getlayer: function(layername){ }, makelayer: function(layername){ } }; $y.svgDraw.fn.init.prototype = $y.svgDraw.fn; $y.svgDraw.svg = function(){return new $y.svgDraw.svg.fn.init();}; $y.svgDraw.svg.fn = $y.svgDraw.svg.prototype = { _className: "$y.svgDraw.svg", init: function(){ this._private = {}; this._private.svg = _doc.createElementNS(_ns, "g"); this._private.style = { fill:"#000", opacity:1.0, stroke:"#000", "stroke-width":1, "stroke-opacity":1.0 }; return this; }, createTagNS: function(ns, elemName, attrHash, node){ // extend createElementNS() ns = ns || _ns; attrHash = attrHash || new Object(); var tag = _doc.createElementNS(ns, elemName); for(var prop in attrHash) tag.setAttribute(prop, attrHash[prop]); if(node){ if(node._className == "$y.svgDraw.svg") node = node.out(); if(node._className == "Array") node.forEach(function(elm){tag.appendChild(elm);}); else tag.appendChild(node); } return tag; }, out: function(){return this._private.svg.childNodes.toArray();}, // style getStyle: function(str){ if(!str) return this._private.style; return this._private.style[str]; }, fill: function(color){ this._private.style.fill = color; return this; }, opacity: function(num){ this._private.style.opacity = num; return this; }, stroke: function(color){ this._private.style.stroke = color; return this; }, stroke_width: function(num){ this._private.style["stroke-width"] = num; return this; }, stroke_opacity: function(num){ this._private.style["stroke-opacity"] = num; return this; }, // draw circle: function(hash, elm){ var style = c4sey.mixin({cx:10, cy:10, r:10}, hash); style = c4sey.mixin(style, this._private.style); this._private.svg.appendChild(this.createTagNS(_ns, "circle", style, elm)); return this; }, ellipse: function(hash, elm){ var style = c4sey.mixin({cx:20, cy:10, rx:20, ry:10}, hash); style = c4sey.mixin(style, this._private.style); this._private.svg.appendChild(this.createTagNS(_ns, "ellipse", style, elm)); return this; }, line: function(hash, elm){ var style = c4sey.mixin({x1:0, y1:0, x2:"100%", y2:"100%"}, hash); style = c4sey.mixin(style, this._private.style); this._private.svg.appendChild(this.createTagNS(_ns, "line", style, elm)); return this; }, rect: function(hash, elm){ var style = c4sey.mixin({x:0, y:0, width:10, height:10, rx:0, ry:0}, hash); style = c4sey.mixin(style, this._private.style); this._private.svg.appendChild(this.createTagNS(_ns, "rect", style, elm)); return this; }, polyline: function(hash, elm){ var style = c4sey.mixin({points:"0,0 100%,0 100%,100%"}, hash); style = c4sey.mixin(style, this._private.style); this._private.svg.appendChild(this.createTagNS(_ns, "polyline", style, elm)); return this; }, poligon: function(hash, elm){ var style = c4sey.mixin({points:"0,0 100%,0 100%,100%, 0,100%"}, hash); style = c4sey.mixin(style, this._private.style); this._private.svg.appendChild(this.createTagNS(_ns, "poligon", style, elm)); return this; }, path: function(hash, elm){ var style = c4sey.mixin({d: ""}, hash); style = c4sey.mixin(style, this._private.style); this._private.svg.appendChild(this.createTagNS(_ns, "path", style, elm)); return this; }, text: function(hash, elm){ var style = c4sey.mixin({x:0, y:0, "font-size":"12pt", "font-family":"serif", "font-weight":"normal", "font-style":"normal", "font-decoration":"none", "word-spacing":"1em", "letter-spacing":1, "text-anchor":"start"}, hash); style = c4sey.mixin(style, this._private.style); var node = (function(){ if(!elm) return null; else if(elm._className == "String") return _doc.createTextNode(elm); else return elm; })(); var text = this.createTagNS(_ns, "text", style, node); this._private.svg.appendChild(text); return this; }, // animate animate: function(hash){ var anim = c4sey.mixin({attributeName:"", from:"", to:"", dur:10, repeatCount:1}, hash); this._private.svg.appendChild(this.createTagNS(_ns, "animate", anim)); return this; }/*, animateColor: function(hash){ return this; }, animateTransform: function(hash){ var anim = c4sey.mixin(hash, {attributeName:"transform"}); return this; }, animateMotion: function(hash, elm){ return this; }*/ }; $y.svgDraw.svg.fn.init.prototype = $y.svgDraw.svg.fn; })(c4sey);
ライセンスに就いて(c4seFCL 0.1)
http://c4se.sakura.ne.jp/bi_license.html