Question

我使用fabric.js来操纵具有各自尺寸和背景图像的不同画布。我的问题是，我不确定如何继续使用以下功能与不同背景图像的新画布（我被一张背景图片粘住）。我尝试使用以下示例创建新的画布并使用CSS控制其背景，但它在第二页上打破了应用程序：

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

我还在学习如何使用不同的画布，所以不确定如何处理这个问题。提前谢谢。

详细信息：

现在我有2页，其中一页有：

<canvas width="500" height="500" id="c"></canvas>

和另一个：

<canvas width="700" height="700" id="c"></canvas>

他们都使用以下JavaScript和CSS：

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

// Upload image
document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {

      //create shadow
      var shadow = {
        color: '#888888',
        blur: 70,
        offsetX: 45,
        offsetY: 45,
        opacity: 0.8
      }

      var oImg = img.set({
        left: 0,
        top: 0,
        angle: 0,
        stroke: '#fffcf7',
        strokeWidth: 20
      }).scale(1);
      oImg.setShadow(shadow); //set shadow
      canvas.add(oImg).renderAll();
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 1
      });
    });
  };
  reader.readAsDataURL(file);
});

// Add text
function Addtext() {
  canvas.add(new fabric.IText('Tap and Type', {
    // left: 0,
    // top: 0,
    fontFamily: 'helvetica neue',
    fill: '#000',
    stroke: '#000',
    strokeWidth: .2,
    fontSize: 45
  }));
}

// Delete selected object
window.deleteObject = function() {
  var activeGroup = canvas.getActiveGroup();
  if (activeGroup) {
    var activeObjects = activeGroup.getObjects();
    for (let i in activeObjects) {
      canvas.remove(activeObjects[i]);
    }
    canvas.discardActiveGroup();
    canvas.renderAll();
  } else canvas.getActiveObject().remove();
}

// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
  selectedObject = event.target;
});
var sendtoback = function() {
  canvas.sendToBack(selectedObject);
}
var sendtofront = function() {
  canvas.bringToFront(selectedObject);
}

fabric.Object.prototype.set({
  transparentCorners: true,
  lockUniScaling: true,
  cornerColor: '#22A7F0',
  borderColor: '#22A7F0',
  cornerSize: 12,
  padding: 5
});

#c {
   background: url(http://i.imgur.com/RkNFWSY.jpg);
}

.myFile {
  position: relative;
  overflow: hidden;
  float: left;
  clear: left;
}
.myFile input[type="file"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  font-size: 30px;
  filter: alpha(opacity=0);
}

Answer 1

<强>第一

为您的画布（位于第二页）提供不同的min="1000000000"，例如id ...

<强>第二

启动新的结构画布实例......

<canvas width="700" height="700" id="d"></canvas>

^{这将确保页面上存在适当的画布}

<强>第三

现在，在你的css中为每个画布（通过它们的id）设置不同的背景图像，就像这样......

var id = document.getElementById('c') && c ||
         document.getElementById('d') && d;
var canvas = new fabric.Canvas(id);

如何在不同页面上具有不同背景图像的画布上使用相同的功能？

1 个答案: