问使用Fabric.js的"Drop Zones“？
EN

Stack Overflow用户

提问于 2019-10-02 13:15:58

回答 1查看 316关注 0票数 0

有没有办法使用fabric.js创建一个像interact.js一样的“拖放区”？

我没有必要尝试任何东西。我有我的想法，我将如何尝试实现它，但我想我会四处询问并在网络上搜索帮助，这样我就不需要发明一些东西，如果它已经完成了。我已经在谷歌上搜索过了，但没有成功。

*注意:我正在努力避免添加另一个库，特别是如果我只打算使用它来完成功能上的一件事，所以，是的，我可以只使用interact.js，但如果可能的话，我宁愿不存储或引用其他库。

编辑:对于那些正在寻找可能的解决方案的人来说…它可以通过isContainedWithinObject(other，absoluteopt，calculateopt)→{Boolean}...我在阅读fabric.js上的文档后发现了这一点。

javascript

fabricjs

回答 1

Stack Overflow用户

发布于 2019-10-02 20:56:41

您可以使用经典的输入法，并使用css将其设置为dropzone样式。请参阅下面的代码片段。

var canvas = new fabric.Canvas('canvas');
canvas.setHeight(300);
canvas.setWidth(400);

document.querySelector("#pdf-upload").addEventListener("change", function(e) {
  var file = e.target.files[0]
  if (file.type == "image/jpeg" || "image/png") {
    var reader = new FileReader();
    reader.onload = function(event) {
      var data = event.target.result;
      fabric.Image.fromURL(data, function(image) {
        var imageObject = image;
        canvas.setBackgroundImage(imageObject);
        imageObject.scaleToHeight(300);
        canvas.renderAll();
      });
    };
    reader.readAsDataURL(file);
  };
  $("#canvas").css("visibility", "visible");
  $(".dz").css("visibility", "hidden");
});

.dz-text {
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  width: 200px;
  text-align: center;
}

.dz-button {
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  z-index: 3;
  margin-left: -150px;
  width: 300px;
  position: absolute;
  padding: 120px 0 0 0;
  height: 100px;
  overflow: hidden;
  border: dotted 5px black;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 20px;
  background-size: 60px 60px;
  background-color: rgba(155, 105, 255, 0.2);
  background-clip: padding-box;
}

.dz-button:hover {
  background-color: rgba(155, 105, 255, 0.3);
}

#canvas {
  border: solid 1px black;
  z-index: 1;
  visibility: hidden;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
</head>

<body>
  <div class="dz">
    <div class="dz-text"><b>Drop image here</b></div>
    <input class="dz-button" id="pdf-upload" type="file">
  </div>

  <canvas id="canvas"></canvas>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58195566

复制

相似问题

问使用Fabric.js的"Drop Zones“？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Fabric.js的"Drop Zones“？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Fabric.js的"Drop Zones“？
EN