调整画布大小调整大小以适应画布新大小

时间:2016-09-23 20:53:10

标签: javascript canvas html5-canvas fabricjs

我需要在调整大小时计算对象比例以适应新的画布大小,我会更好地解释图片,例如我们有这种情况:

canvas objects before applying the resize

canvas objects after resize

另一个例子:

enter image description here enter image description here

所以对象需要在不同的屏幕和分辨率中按比例调整大小,我不想超出/溢出画布大小

例如在这个fiddle中我需要这个对象拉伸并适合画布中的所有可用空间。



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

var shadow = {
    color: 'rgba(0,0,0,0.6)',
    blur: 20,    
    offsetX: 10,
    offsetY: 10,
    opacity: 0.6,
    fillShadow: true, 
    strokeShadow: true 
}

 var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "#FF0000",
        stroke: "#000",
        width: 100,
        height: 100,
        strokeWidth: 10, 
        opacity: .8      
    });
    
  var rect1 = new fabric.Rect({
        left: 50,
        top: 100,
        fill:  "#f0ff00",
        stroke: "#000",
        width: 80,
        height: 80,
        strokeWidth: 10, 
        opacity: .8      
    });
   
rect.setShadow(shadow);
canvas.add(rect);
canvas.add(rect1);

#c{
  border:1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>
&#13;
&#13;
&#13;

0 个答案:

没有答案