Question

我使用fabricjs在画布中创建了一个剪裁区域，这是我创建的剪裁区域，

＆＃13;

var canvasDefaultWidth  = 350;
var canvasDefaultHeight = 180;

var targetCanvas = document.getElementById('canvas');

canvas = new fabric.Canvas(targetCanvas);

canvas.setWidth(canvasDefaultWidth);
canvas.setHeight(canvasDefaultHeight);

canvas.backgroundColor = '#fff';
canvas.clipTo = function(ctx) {                     
  ctx.beginPath();
  var rect = new fabric.Rect({
    fill: '#fff',
    opacity: 1,
    left: 35,
    top: 15,
    width: 280,
    height: 150,
  });
  rect.render(ctx);
}
canvas.controlsAboveOverlay = true;

var text = new fabric.IText('Lorem Ipsum Dolla');
canvas.add(text);

canvas.renderAll();

＆＃13;

html{background:#cfcfcf}
canvas{ border: 1px solid #000; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.2/fabric.min.js"></script>
<body>
  <canvas id="canvas"></canvas>
</body>

＆＃13;

我使用left和top属性手动移动剪切区域到画布的中心和中间，虽然我增加画布大小或减小剪裁区域大小，但是可以自动使剪裁区域自动进入画布的中心和中间位置

将剪辑区域移动到画布中心，Fabric js

0 个答案: