object:scaling 不适用于边界对象

Question

我是 Fabric js 的新手。谁能建议我在边界框内限制比例对象？

我的java脚本代码如下

(function(global) {

var canvas = new fabric.Canvas('maincanvas');       
var yourNameObjs = []; 
var goodtop =358, goodleft=250, boundingObject;

var boundingObject = new fabric.Rect({
                left: 100,
                top: 90,
                width: 200,
                height: 250,
                opacity: 4,
                selectable:false,             
                fill: 'red',
            });
canvas.add(boundingObject); 

addText = function(){
            var nametoprint = $("#nametoprint").val();          

            canvas.remove(yourNameObjs);                

            yourNameObjs = new fabric.Text(nametoprint, { 
                left: 150, //Take the block's position
                opacity: 9,
                top: 150, 
                fontFamily: 'Delicious_500', 

                }
            );
            canvas.add(yourNameObjs);

            canvas.on("object:moving", function(){
                var obj = yourNameObjs;
                var bounds = boundingObject;
                obj.setCoords();
                if(!obj.isContainedWithinObject(bounds)){
                    obj.setTop(goodtop);
                    obj.setLeft(goodleft);                  
                } else {
                    goodtop = obj.top;
                    goodleft = obj.left;
                }  
            });

            canvas.on("object:scaling", function(){
                var obj = yourNameObjs;
                var bounds = boundingObject;
                obj.setCoords();
                if(!obj.isContainedWithinObject(bounds)){
                    obj.setTop(goodtop);
                    obj.setLeft(goodleft);                  
                } else {
                    goodtop = obj.top;
                    goodleft = obj.left;
                }  
            });

            canvas.renderAll();             
        };

    })();

html 代码在下面

<input type="text" name="nametoprint" id="nametoprint" value="alex" /> 
<input type= "button" name="addtxt" id="addtxt" onclick="addText()" value="add text"  />

<canvas id="maincanvas"  style="border:1px solid #000;"  width="400" height="450" ></canvas>

我也在fiddle这里添加了这个http://jsfiddle.net/pfgm8myp/

我只想允许在红色边界内缩放文本对象 box.moving 对象正在工作 fine.i 还添加了用于缩放的代码，但它不起作用。

谁能建议我如何限制这种缩放？

提前致谢。

Answer 1

我按照自己的逻辑发在这里。 http://jsfiddle.net/9xojfmyt/

我在下面添加了 javascript 代码

(function(global) {

var canvas = new fabric.Canvas('maincanvas');       
var yourNameObjs = []; 
var goodtop =358, goodleft=250, boundingObject;

var boundingObject = new fabric.Rect({
                left: 100,
                top: 90,
                width: 200,
                height: 250,
                opacity: 4,
                selectable:false,             
                fill: 'red',
            });
canvas.add(boundingObject); 

addText = function(){
            var nametoprint = $("#nametoprint").val();          

            canvas.remove(yourNameObjs);                

            yourNameObjs = new fabric.Text(nametoprint, { 
                left: 150, //Take the block's position
                opacity: 9,
                top: 150, 
                fontFamily: 'Delicious_500', 

                }
            );
            canvas.add(yourNameObjs);

// canvas moving limit
            canvas.observe("object:moving", function(e){
                var obj = yourNameObjs;
                var bounds = boundingObject;
                var objw = parseInt(parseInt(obj.width) * obj.scaleX);
                var objh = parseInt(parseInt(obj.height) * obj.scaleY);
                //left
                if(obj.left < bounds.left){
                    obj.setLeft(bounds.left);
                }
                //top
                if(obj.top < bounds.top){
                    obj.setTop(bounds.top);
                }
                //right
                if((parseInt(obj.left) + objw) > (parseInt(bounds.left)+parseInt(bounds.width))){
                    obj.setLeft(((parseInt(bounds.left)+parseInt(bounds.width)) - objw));                   
                }
                //bottom
                if((parseInt(obj.top) + objh) > (parseInt(bounds.top)+parseInt(bounds.height))){
                    obj.setTop(((parseInt(bounds.top)+parseInt(bounds.height)) - objh));                    
                }               
            });

            // canvas scaling limit
            canvas.observe("object:scaling", function(e){
                var obj = yourNameObjs;
                var bounds = boundingObject;
                var objw = parseInt(parseInt(obj.width) * obj.scaleX);
                var objh = parseInt(parseInt(obj.height) * obj.scaleY);

                //left
                if(obj.left < bounds.left || (parseInt(obj.left) + objw) > (parseInt(bounds.left)+parseInt(bounds.width))){
                    obj.setLeft(bounds.left);
                    obj.setScaleX((bounds.width/obj.width));
                }
                //top
                if(obj.top < bounds.top || (parseInt(obj.top) + objh) > (parseInt(bounds.top)+parseInt(bounds.height))){
                    obj.setTop(bounds.top);
                    obj.setScaleY((bounds.height/obj.height));
                }              
            });

            canvas.renderAll();             
        };

    })();

Answer 2

位修改与 Albert's 答案比较。如果您想在 canvas 内限制对象，请将 moving 事件替换为以下代码。

// canvas scaling limit
canvas.observe("object:scaling", function(e){
    var obj = e.target;
    var bounds = {
                    left : 5,  //here it keep 5 px margin from all direction
                    top : 5,
                    width : canvas.width - 10,
                    height : canvas.height - 10
                };
    var objw = parseInt(parseInt(obj.width) * obj.scaleX);
    var objh = parseInt(parseInt(obj.height) * obj.scaleY);

    //left
    if(obj.left < bounds.left || (parseInt(obj.left) + objw) > (parseInt(bounds.left)+parseInt(bounds.width))){
        obj.setLeft(bounds.left);
        obj.setScaleX((bounds.width/obj.width));
    }
    //top
    if(obj.top < bounds.top || (parseInt(obj.top) + objh) > (parseInt(bounds.top)+parseInt(bounds.height))){
        obj.setTop(bounds.top);
        obj.setScaleY((bounds.height/obj.height));
    }              
});

object:scaling 不适用于边界对象

object:scaling is not working with bounding object

javascript

canvas

fabricjs