Javascript 如何在Fabric.js中限制画布对象的最大宽度和高度
这是你的电话号码 我想在调整对象大小时限制对象的最大高度/宽度 代码如下：Javascript 如何在Fabric.js中限制画布对象的最大宽度和高度,javascript,html,canvas,fabricjs,Javascript,Html,Canvas,Fabricjs,这是你的电话号码 我想在调整对象大小时限制对象的最大高度/宽度 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script> </head> <body>
<!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>
（功能（）{
var canvas=newfabric.canvas（'c'）；
add（newfabric.Rect（{宽度：50，高度：50，填充：“红色”，顶部：100，左侧：100}））；
add（newfabric.Rect（{宽度：30，高度：30，填充：“绿色”，顶部：50，左侧：50}））；
})();
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));
});
适用于大多数结构对象。。但是你想得到你的物体的比率，对于maxWidth你可以复制这个。。。对于maxHeight，请将其反转
fabric.Image.fromURL(photo, function(image) {
//console.log(image.width, image.height);
var heightRatio = image.height / image.width;
var maxWidth = 100;
image.set({
left: canvasDimensions.width / 2,//coord.left,
top: canvasDimensions.height / 2, //coord.top,
angle: 0,
width: maxWidth,
height: maxWidth * heightRatio
})
//.scale(getRandomNum(minScale, maxScale))
.setCoords();
canvas.add(image);
})
这里有人说，我们需要通过各种活动来实现这一目标。。我该怎么做？使用
mousemovemouseupmousedown