Paper.js 図形の表示

図形の表示

canvasを直接利用するより、Paper.jsやKineticJS、Fabric.js、EaselJSなどのライブラリを利用するほうが簡単。

Paper.js
・ http://paperjs.org/

$(document).ready(function(){
  'use scrict';

  paper.install(window);
  paper.setup(document.getElementById('mainCanvas'));

  //ここで描画する
  let c = Shape.Circle(200, 200, 50);
  c.fillColor = 'green';

  paper.view.draw();


  paper.setup(document.getElementById('mainCanvas_2'));

  //ここに描画する
  let c2;
  for(let x = 25; x < 400; x += 50){
    for(let y = 25; y < 400; y += 50){
      c2 = Shape.Circle(x, y, 20);
      c2.fillColor = 'green';
    }
  }

  paper.view.draw();
});

onMouseDownを記述してイベントハンドラを追加する

ユーザーがクリックしたときに円を描画する

$(document).ready(function(){
  'use scrict';
  console.log('main.js を読み込み中...');

  paper.install(window); //paper の準備1
  paper.setup(document.getElementById('mainCanvas')); //mainCanvas をキャンバスに

  let tool = new Tool();

  //Hello World
  let c = Shape.Circle(200,200,80); //円の図形
  c.fillColor = '#000'; //黒く塗る

  let text = new PointText(200,200); //新しいテキストを領域中央に
  text.justification = 'center' //センタリング
  text.fillColor = '#fff'; //色
  text.fontSize = 20; //フォントサイズ
  text.content = 'hello world'; //文字列

  //イベントハンドラ
  tool.onMouseDown = function(event){
    let c = Shape.Circle(event.point.x, event.point.y, 20);
    c.fillColor = 'green';
  }

  paper.view.draw();//必要？
});