c4se記:さっちゃんですよ☆

.。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

.。oO(此のblogは、主に音樂考察Programming に分類されますよ。ヾ(〃l _ l)ノ゙♬♪♡)

音樂は SoundCloud に公開中です。

考察は現在は主に Scrapbox で公表中です。

Programming は GitHub で開發中です。

svgDraw.jsをちょっと作る

JabaScriptとSVGでグラフィックを作るsvgDraw.jsを、ちょっと作ってみた。
poemlプロジェクトの一環です。
めっさプロトタイプチェーン。jQuery式ですな。
まだ四角形しか書けないが。
また、この仕様だとSVGアニメーションが作れない。


HTMLサンプル。(uupaa.js - http://code.google.com/p/uupaa-js/ 使用。)

<html xml:lang="ja"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="Content-Script-Type" content="application/javascript"/>
    <style>
    #svgCanvas{border:solid red 1px;}
    </style>
    <script src="../../lib/uupaa.js"></script>
    <script src="svgDraw.js"></script>
    <!--<script src="../../lib/jquery.js"></script>-->
    <script>
    uu.ready(function(){
      svgDraw(document.getElementById("svgCanvas")).width(500).height(500).fill("#fff").rect({width:500, height:500}).stroke("blue").fill("orange").rect({x:100, y:50, width:50, height:100});
    }, "D");
    </script>
    <title>svgDraw.js</title>
  </head>
  <body>
    <div id="svgCanvas"></div>
  </body>
</html>


以下svgDraw.js 0.1.1。

/*
 * c4se project
 * svgDraw.js 0.1.1
 *
 * 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@gmsil.com
 *                  http://c4se.sakura.ne.jp/ne_index.html
 *
 * ==License
 * <NYSL Version 0.9982>
 * http://www.kmonos.net/nysl/readme.html
 * ----------------------------------------
 * A. 本ソフトウェアは Everyone'sWare です。このソフトを手にした一人一人が、
 *    ご自分の作ったものを扱うのと同じように、自由に利用することが出来ます。
 *   A-1. フリーウェアです。作者からは使用料等を要求しません。
 *   A-2. 有料無料や媒体の如何を問わず、自由に転載・再配布できます。
 *   A-3. いかなる種類の 改変・他プログラムでの利用 を行っても構いません。
 *   A-4. 変更したものや部分的に使用したものは、あなたのものになります。
 *        公開する場合は、あなたの名前の下で行って下さい。
 * B. このソフトを利用することによって生じた損害等について、作者は
 *    責任を負わないものとします。各自の責任においてご利用下さい。
 * C. 著作者人格権は ○○○○ に帰属します。著作権は放棄します。
 * D. 以上の3項は、ソース・実行バイナリの双方に適用されます。
 *
 * ==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.
 */

(function(){

var svgDraw = window.svgDraw = function(node){
  return svgDraw.fn.make(node);
};

svgDraw.fn = svgDraw.prototype = {
  _className: "svgDraw",
  ns: "http://www.w3.org/2000/svg",
  svg: document.createElementNS(this.ns, "svg"),
  style: {stroke:"#000", fill:"#000"},
  make: function(node){
    node.appendChild(document.createElementNS(this.ns, "svg"));
    this.svg = node.lastChild;
    return this;
  },
  width: function(num){
    this.svg.setAttribute("width", num);
    return this;
  },
  height: function(num){
    this.svg.setAttribute("height", num);
    return this;
  },
  stroke: function(color){
    this.style.stroke = color;
    return this;
  },
  fill: function(color){
    this.style.fill = color;
    return this;
  },
  rect: function(hash){
    var style = c4sey.mixin({x:0, y:0, width:10, height:10, stroke:this.style.stroke, fill:this.style.fill}, hash);
    var rect = document.createElementNS(this.ns, "rect");
    for(var prop in style)
      rect.setAttribute(prop, style[prop]);
    this.svg.appendChild(rect);
    return this;
  }
};

})();

// ========== end <svgDraw.js> ==========

try{
  c4sey;
}catch(e){
  c4sey = {};
}
c4sey.mixin = function(hash1, hash2){
  for(var prop in hash2)
    hash1[prop] = hash2[prop];
  return hash1;
};

以上。
(ちなみに更に作り次いで、textまでは普通に入れられるようになっている。)