niiyz
2/9/2015 - 6:28 PM

fabricjsで四角形を描くサンプル // source http://jsbin.com/wofiyibafo

fabricjsで四角形を描くサンプル

// source http://jsbin.com/wofiyibafo

jsbin.wofiyibafo.js
content_copyfile_download
// Code goes here

window.onload = function() {
  var canvas = new fabric.Canvas('c');
  
  var linePoint1 = null, linePoint2 = null;
  var rect1 = null;
  
  canvas.on('mouse:down', function(options) {
    var p = canvas.getPointer(options.e);
    console.log("x:" + p.x + " y:" + p.y);
    if (linePoint1 == null) {
        linePoint1 = {x: p.x, y: p.y};
    } else if (linePoint1 && linePoint2) {
        rect1.selectable = true;
        canvas.off("mouse:move");
        canvas.off("mouse:down");
    }
  });

  canvas.on('mouse:move', function(options) {
    if (linePoint1) {
        var p = canvas.getPointer(options.e);
        if (rect1) {
            canvas.remove(rect1);
            rect1 = null;
        }
        linePoint2 = {x: p.x, y: p.y};
        rect1 = new fabric.Rect({
            width: linePoint2.x - linePoint1.x,
            height: linePoint2.y - linePoint1.y,
            left: linePoint1.x,
            top: linePoint1.y,
            angle: 0,
            fill: 'rgba(255,0,0,0.5)',
            selectable: false
          });
        canvas.add(rect1);
        canvas.renderAll();
    }
  });

};
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="fabricjsで四角形を描くサンプル">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
  </head>
  <body>
    <canvas id="c" width="500" height="500" style="border:solid 1px #000;"></canvas>
    <div id="output"></div>
  <script id="jsbin-javascript">
// Code goes here

window.onload = function() {
  var canvas = new fabric.Canvas('c');
  
  var linePoint1 = null, linePoint2 = null;
  var rect1 = null;
  
  canvas.on('mouse:down', function(options) {
    var p = canvas.getPointer(options.e);
    console.log("x:" + p.x + " y:" + p.y);
    if (linePoint1 == null) {
        linePoint1 = {x: p.x, y: p.y};
    } else if (linePoint1 && linePoint2) {
        rect1.selectable = true;
        canvas.off("mouse:move");
        canvas.off("mouse:down");
    }
  });

  canvas.on('mouse:move', function(options) {
    if (linePoint1) {
        var p = canvas.getPointer(options.e);
        if (rect1) {
            canvas.remove(rect1);
            rect1 = null;
        }
        linePoint2 = {x: p.x, y: p.y};
        rect1 = new fabric.Rect({
            width: linePoint2.x - linePoint1.x,
            height: linePoint2.y - linePoint1.y,
            left: linePoint1.x,
            top: linePoint1.y,
            angle: 0,
            fill: 'rgba(255,0,0,0.5)',
            selectable: false
          });
        canvas.add(rect1);
        canvas.renderAll();
    }
  });

};
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
  <head>
<meta name="description" content="fabricjsで四角形を描くサンプル">
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"><\/script>
  </head>
  <body>
    <canvas id="c" width="500" height="500" style="border:solid 1px #000;"></canvas>
    <div id="output"></div>
  </body>

</html></script>


<script id="jsbin-source-javascript" type="text/javascript">
    // Code goes here

window.onload = function() {
  var canvas = new fabric.Canvas('c');
  
  var linePoint1 = null, linePoint2 = null;
  var rect1 = null;
  
  canvas.on('mouse:down', function(options) {
    var p = canvas.getPointer(options.e);
    console.log("x:" + p.x + " y:" + p.y);
    if (linePoint1 == null) {
        linePoint1 = {x: p.x, y: p.y};
    } else if (linePoint1 && linePoint2) {
        rect1.selectable = true;
        canvas.off("mouse:move");
        canvas.off("mouse:down");
    }
  });

  canvas.on('mouse:move', function(options) {
    if (linePoint1) {
        var p = canvas.getPointer(options.e);
        if (rect1) {
            canvas.remove(rect1);
            rect1 = null;
        }
        linePoint2 = {x: p.x, y: p.y};
        rect1 = new fabric.Rect({
            width: linePoint2.x - linePoint1.x,
            height: linePoint2.y - linePoint1.y,
            left: linePoint1.x,
            top: linePoint1.y,
            angle: 0,
            fill: 'rgba(255,0,0,0.5)',
            selectable: false
          });
        canvas.add(rect1);
        canvas.renderAll();
    }
  });

};</script></body>

</html>