5

ここにjsfiddleがあります。

オブジェクトのサイズを変更するときに、オブジェクトの最大の高さ/幅を制限したいと考えています。

コードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
  </head>
  <body>
    <canvas id="c" width="300" height="300" style="border:1px solid #ccc"></canvas>
    <script>
      (function() {

         var canvas = new fabric.Canvas('c');

         canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'red', top: 100, left: 100 }));
         canvas.add(new fabric.Rect({ width: 30, height: 30, fill: 'green', top: 50, left: 50 }));


      })();
    </script>
  </body>
</html>​
4

2 に答える 2

9

ファブリック オブジェクトをスケーリングすると、scaleX および scaleY プロパティが更新され、オブジェクトの新しいスケーリングされたサイズが反映されます。したがって、最初の幅が 50 の rect を 2 倍にスケーリングすると、実際の幅は 100 になります。

あなたがする必要があるのは、maxHeight または maxWidth を指定して、シェイプに許可される最大スケールを計算することです。これは、最大次元を初期次元で割って計算されます。

オブジェクトの最大サイズを実装する方法の例を次に示します

var canvas = new fabric.Canvas("c");
var rect1  = new fabric.Rect({ width: 50, height: 50, fill: 'red',   top: 100, left: 100});
var rect2  = new fabric.Rect({ width: 30, height: 30, fill: 'green', top: 50,  left: 50 });

// add custom properties maxWidth and maxHeight to the rect
rect1.set({maxWidth:100, maxHeight:120});

canvas.observe("object:scaling", function(e){
    var shape        = e.target
    ,   maxWidth     = shape.get("maxWidth")
    ,   maxHeight    = shape.get("maxHeight")
    ,   actualWidth  = shape.scaleX * shape.width
    ,   actualHeight = shape.scaleY * shape.height;

    if(!isNaN(maxWidth) && actualWidth >= maxWidth){
        // dividing maxWidth by the shape.width gives us our 'max scale' 
        shape.set({scaleX: maxWidth/shape.width})
    }

    if(!isNaN(maxHeight) && actualHeight >= maxHeight){
        shape.set({scaleY: maxHeight/shape.height})
    }

    console.log("width:" + (shape.width * shape.scaleX) + " height:" + (shape.height * shape.scaleY));
});
于 2012-12-19T23:03:50.927 に答える