javascript - 将 "bleed area"添加到 2 个 Canvas ？

Question

我有一个应用程序在 Canvas 上有一个“出血区域”。我现在想将其应用于 2 幅 Canvas 。我试过使用 activeCanvas 甚至设置 canvas1 看看我是否无法让它在第一张 Canvas 上工作，但我似乎以某种方式搞砸了.

我收到错误 Uncaught ReferenceError: canvas1 is not defined。

我做错了什么？

var activeCanvas, front, back;

$(document).ready(function() {
  canvas1 = new fabric.Canvas('front');
  canvas2 = new fabric.Canvas('back');
  canvas1.setHeight(360);
  canvas1.setWidth(208);
  canvas2.setHeight(360);
  canvas2.setWidth(208);
  changeView(1);
});

function changeView(value) {
  if (value == 1) {
    activeCanvas = canvas1;
    $('#front').parent().css('display', 'block');
    $('#back').parent().css('display', 'none');
  }

  if (value == 2) {
    activeCanvas = canvas2;
    $('#front').parent().css('display', 'none');
    $('#back').parent().css('display', 'block');
  }
}

function dropText() {
  var text = new fabric.Text('test');
  activeCanvas.add(text);
}


var padding = 20;
canvas1.on('object:moving', function(e) {
  var obj = e.target;
  
  // if object is too big ignore
  if (obj.currentHeight > obj.canvas.height - padding * 2 ||
      obj.currentWidth > obj.canvas.width - padding * 2) {
      return;
  }
  obj.setCoords();

  // top-left corner
  if (obj.getBoundingRect().top < padding ||
    obj.getBoundingRect().left < padding) {
      obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + padding);
      obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + padding);
  }
  
  // bot-right corner
  if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height - padding || 
    obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width - padding) {
      obj.top = Math.min(
        obj.top,
        obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - padding);
      obj.left = Math.min(
        obj.left,
          obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - padding);
  }
});

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<button onclick="changeView(1);">Front</button>
<button onclick="changeView(2);">Back</button>
<button onclick="dropText();">Add Text</button>

<div style="text-align: center">
  <canvas id="front"></canvas>
  <canvas id="back"></canvas>
</div>

Answer 1

将您的 Canvas 事件处理程序放入文档就绪函数中。问题是它试图在文档加载之前将事件监听器添加到 canvas1，那时候它没有创建织物 Canvas 。所以这是抛出错误。

var activeCanvas, front, back,canvas1,canvas2;
$(document).ready(function() {

  canvas1 = new fabric.Canvas('front');
  canvas2 = new fabric.Canvas('back');
  canvas1.setHeight(360);
  canvas1.setWidth(208);
  canvas2.setHeight(360);
  canvas2.setWidth(208);
  changeView(1);

  var padding = 20;
  canvas1.on('object:moving', function(e) {
    var obj = e.target;

    // if object is too big ignore
    if (obj.currentHeight > obj.canvas.height - padding * 2 ||
        obj.currentWidth > obj.canvas.width - padding * 2) {
        return;
    }
    obj.setCoords();

    // top-left corner
    if (obj.getBoundingRect().top < padding ||
      obj.getBoundingRect().left < padding) {
        obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + padding);
        obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + padding);
    }

    // bot-right corner
    if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height - padding || 
      obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width - padding) {
        obj.top = Math.min(
          obj.top,
          obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - padding);
        obj.left = Math.min(
          obj.left,
            obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - padding);
    }
  });
});

function changeView(value) {
  if (value == 1) {
    activeCanvas = canvas1;
    $('#front').parent().css('display', 'block');
    $('#back').parent().css('display', 'none');
  }

  if (value == 2) {
    activeCanvas = canvas2;
    $('#front').parent().css('display', 'none');
    $('#back').parent().css('display', 'block');
  }
}

function dropText() {
  var text = new fabric.Text('test');
  activeCanvas.add(text);
}

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<button onclick="changeView(1);">Front</button>
<button onclick="changeView(2);">Back</button>
<button onclick="dropText();">Add Text</button>

<div style="text-align: center">
  <canvas id="front"></canvas>
  <canvas id="back"></canvas>
</div>

为两个 Canvas 添加出血区域:-

您将函数作为匿名传递，将其命名为 onObjectMoving() 然后添加到 canvas1.on('object:moving',onObjectMoving);canvas2.on('objec‌ t:moving',onObjectMo‌ ving);

var activeCanvas, front, back,canvas1,canvas2;
$(document).ready(function() {

  canvas1 = new fabric.Canvas('front');
  canvas2 = new fabric.Canvas('back');
  canvas1.setHeight(360);
  canvas1.setWidth(208);
  canvas2.setHeight(360);
  canvas2.setWidth(208);
  changeView(1);

  var padding = 20;
  canvas1.on('object:moving', onObjectMoving);
  canvas2.on('object:moving', onObjectMoving);
  function onObjectMoving(e) {
    var obj = e.target;

    // if object is too big ignore
    if (obj.currentHeight > obj.canvas.height - padding * 2 ||
        obj.currentWidth > obj.canvas.width - padding * 2) {
        return;
    }
    obj.setCoords();

    // top-left corner
    if (obj.getBoundingRect().top < padding ||
      obj.getBoundingRect().left < padding) {
        obj.top = Math.max(obj.top, obj.top - obj.getBoundingRect().top + padding);
        obj.left = Math.max(obj.left, obj.left - obj.getBoundingRect().left + padding);
    }

    // bot-right corner
    if (obj.getBoundingRect().top + obj.getBoundingRect().height > obj.canvas.height - padding || 
      obj.getBoundingRect().left + obj.getBoundingRect().width > obj.canvas.width - padding) {
        obj.top = Math.min(
          obj.top,
          obj.canvas.height - obj.getBoundingRect().height + obj.top - obj.getBoundingRect().top - padding);
        obj.left = Math.min(
          obj.left,
            obj.canvas.width - obj.getBoundingRect().width + obj.left - obj.getBoundingRect().left - padding);
    }
  };
});

function changeView(value) {
  if (value == 1) {
    activeCanvas = canvas1;
    $('#front').parent().css('display', 'block');
    $('#back').parent().css('display', 'none');
  }

  if (value == 2) {
    activeCanvas = canvas2;
    $('#front').parent().css('display', 'none');
    $('#back').parent().css('display', 'block');
  }
}

function dropText() {
  var text = new fabric.Text('test');
  activeCanvas.add(text);
}

canvas {
  border: 1px solid #dddddd;
  margin-top: 10px;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<button onclick="changeView(1);">Front</button>
<button onclick="changeView(2);">Back</button>
<button onclick="dropText();">Add Text</button>

<div style="text-align: center">
  <canvas id="front"></canvas>
  <canvas id="back"></canvas>
</div>