Paper.jsでまるをかく。

はじめまして、BRIXITの立野です。
本日よりBRIXIT Journal noteが始まりました。今後とも宜しくお願いいたします！

さて、来年は2020年オリンピックの年で盛り上がっていますが、AdobeFlashの開発&提供が終了の年でもあります。そこでFlashの代替になると言われている、HTML5より追加されたCanvasに少し触れていきます。

まるをかく。

canvasは直接利用するより、Paper.jsなどのライブラリを使ったほうが簡単に実装できます。paper.jsのサンプルをみると非常になめらかです。
Paper.js: http://paperjs.org
サンプル: http://paperjs.org/examples/

$(function(){
    //html内のcanvasを取得
    let canvasA = docment.getElementById('mainCanvas');

//paper.js
    paper.install(window); //グローバルにpaper.jsをインストール
    paper.setup(canvasA); //canvasを設定

//描画
    let circle = Shape.Circle(200, 200, 50); //Circle(x軸位置,y軸位置,円の半径)
    circle.fillColor = '#cbc3ab'; //円の色

    paper.view.draw(); //描画する
});

イベントを追加してクリックした時にまるをかく。

上記はただ円を描画するだけのものでした。次はイベントを追加して画面をクリックしたときに丸を描画します。

$(function(){
    let canvasB = document.getElementById('mainCanvas');

    paper.install(window);
    paper.setup(canvasB);

    let tool = new Tool(); //Toolインスタンスの生成

    let circleB = Circle(200, 200, 50); //円
    crcleB.fillColor = '#bcdcc8'; //色

    let text = new PointText(200, 200) //テキストを中央に
    text.fillColor = '#000';
    text.fontSize = '18';
    text.justification = 'center'; //センタリング
    text.content = 'Hello Paper.js'; //文字列

    //イベントハンドラ クリックした時に描画する
    tool.onMouseDown = function(event){
    let circle = Shape.Circle(event.point.x, event.point.y, 25);
    //Circle(x軸位置,y軸位置,半径)
    circle.fillColor = '#df4620';
    }
    
    paper.view.draw();
    
});

このようにpaper.jsを使うと、ベクターグラフィックが簡単に描画できます。今回は基礎的な部分を紹介しましたが、paper.jsにはまだ様々な機能があります。これにアニメーションを加えたらより楽しくなりそうです！

#BRIXIT #Paperjs #JavaScript #テクノロジー #プログラミング