raphael_test

raphaelの動作テストです。

by asuma igarashi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<div id="svg_wrap">
</div>

CSS

#svg_wrap {
    width: 100%;
    height: 100%;
}

JavaScript

// Raphael()でSVG要素を生成。対象要素のid, 幅, 高さを指定している
const paper = Raphael('svg_wrap', '100%', '100%');

// x座標10, y座標10の位置に100px * 100pxサイズの、角を5pxで丸めた四角形を表示
const rect = paper.rect(10, 10, 100, 100, 5);

// 四角形の塗りつぶし色、枠線の色、枠線の太さを指定
rect.attr({
    fill: '#AAA',
    stroke: '#666',
    'stroke-width': 3
});

const checkbox = paper.circle(30, 60, 5);

checkbox.attr({fill: '#FFF'})

// 適当な位置に文字を表示。フォントなど指定する場合はpaper.print()を使う
const text = paper.text(60, 60, 'にゃーん');


/**
 * 以下でイベントを設定
 */

// マウスオーバー時
rect.mouseover(() => {
    // 枠線の太さ、透明度を変更する
    rect.attr({
        'stroke-width': 8,
        opacity: 0.8
    });
});

// マウスアウト時
rect.mouseout(() => {
    // 枠線の太さ、透明度を元に戻す
    rect.attr({
        'stroke-width': 3,
        opacity: 1.0
    });
});

// クリック時
rect.click(() => {
    // ランダムに色決定
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const color = `rgb(${r}, ${g}, ${b})`;
    // 塗りつぶし色を変更する
    rect.attr({
        fill: color
    });
});

checkbox.click(() => {
    // ランダムに色決定
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const color = `rgb(${r}, ${g}, ${b})`;
    // 塗りつぶし色を変更する
    rect.attr({
        fill: color
    });
});;