最近のトラックバック

2018年8月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
無料ブログはココログ

« スピリッツ 目次 2012年 10月 22日号 NO. 45 | トップページ | スピリッツ 目次 2012年 10月 29日号 NO. 46 »

2018-05-18

svg で 将棋盤を書く

まず、svg の座標系は 座標原点は左上隅で、x は右方向に増加し、 y は下方向に増加する。

盤面は(x,y)=(1,1)から(10,10)に書くとする。

盤縁は

    <polygon points="1 1 10 1 10 10  1 10" fill="none"/>

と、polygonで書いておく。線で書いてもいいのだが角に段がつくので始末が面倒。

升目は、横線と

    <line x1="1" y1="2" x2="10" y2="2" />

縦線で

    <line x1="2" y1="1" x2="2"  y2="10" />

必要分繰り返す。

星は

    <circle cx="4" cy="4" r="0.04" />

といった具合。

で、盤面内の駒だが、盤面の右上、将棋の座標でいったら、(0,0) に作っておいて必要に応じて表示する

攻め方の駒は

    <symbol id="K" >

    <text x="10" y="0.87">玉</text>

    </symbol>

ここで、yの値に 0.87 という中途半端な数値は、文字の大きさを 1.00 とした場合の参照位置(ベースライン)を試行錯誤で決めたもの、以前は 0.85 にしていたが、少し下げて 0.87 とした。

受け方の駒は

    <symbol id="k" >

    <text x="11" y="-0.13" transform="rotate(180, 11, 0)">玉</text>

    </symbol>

将棋の座標(-1,-1) に作っておいて (x, y) = (11,0) を中心に 180度回転させると将棋の座標(0,0)にめでたく、逆立ちしたものができる。

12玉の配置なら

  <use xlink:href="#k" x="-1" y="2" />

とする。

持駒は、将棋の 0 筋に表示するとして

<use xlink:href="#B" x="0" y="6" />

とするか、SVGの座標を使い

<text x="10" y="8">四</text>

とするかだ。

« スピリッツ 目次 2012年 10月 22日号 NO. 45 | トップページ | スピリッツ 目次 2012年 10月 29日号 NO. 46 »

「パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/148337/66733275

この記事へのトラックバック一覧です: svg で 将棋盤を書く:

« スピリッツ 目次 2012年 10月 22日号 NO. 45 | トップページ | スピリッツ 目次 2012年 10月 29日号 NO. 46 »