svgDraw.js 0.2.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, 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