问题描述
如何将项目(如图像或其他画布中的其他对象)拖放到由 fabricjs 管理的画布中?我找到了许多如何在画布内移动项目的示例,但我想将项目从外部元素拖放到画布中.
How can I drop items (like image, or other object from other canvas) into canvas which is managed by fabricjs? I have found many examples how to move items inside canvas but I would like to drag and drop item from outer element into canvas.
推荐答案
既然你要了一个例子,我还没有自己尝试过,这里是:
Since you asked for an example and I haven't tried it out myself yet, here goes:
<div id="images">
<img draggable="true" src="http://i.imgur.com/8rmMZI3.jpg" width="250" height="250"></img>
<img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="252" height="295"></img>
<img draggable="true" src="http://i.imgur.com/wMU4SFn.jpg" width="238" height="319"></img>
</div>
<div id="canvas-container">
<canvas id="canvas" width="800" height="600"></canvas>
</div>
JS 故障
1.Fabric.canvas
实例
当然,首先我们需要画布:
JS Breakdown
1. Fabric.canvas
instance
First we want our canvas, of course:
var canvas = new fabric.Canvas('c');
2.特征检测(可选)
不确定这是否必要,因为您拥有画布这一事实使得浏览器很可能也具有拖放功能.如果你要使用它,你可以这样做,使用 Modernizr:
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
// Bind the event listeners for the image elements
// Bind the event listeners for the canvas
} else {
// Replace with a fallback to a library solution.
alert("This browser doesn't support the HTML5 Drag and Drop API.");
}
3.活动
再次,与下面的源文章不同,源元素和目标元素是不同的(在该文章的示例中,您只需在同一个父容器中移动 div
s),所以我没有注意到有些事件是针对被拖动元素的,但大多数事件都绑定到您要拖放的元素.
3. Events
Again, unlike the source article I below, the source and target elements are different (in that articles's example, you just move div
s around within the same parent container), so I failed to notice that some of the events are meant for the element being dragged, but most are bound to the element into which you are dropping.
注意:我知道这在技术上是关于 Fabric.js 的问题,但在将对象添加到 <canvas>
的上下文中,这确实是关于拖放的问题使用 Fabric.js,这就是为什么我现在要更深入地了解 DnD 的东西.
NOTE: I know this is technically a question about Fabric.js, but it's really kind of a question about Drag and Drop in the context of adding objects to a <canvas>
with Fabric.js, which is why I'm going a bit more in depth about the DnD stuff now.
对于<img>
dragstart
(我这里加了一个类来降低不透明度)dragend
(并在此处删除了该类)
dragstart
(I added a class here to lower the opacity)dragend
(and removed that class here)
对于#canvas-container
:
dragenter
(添加了一个类来为画布容器提供漂亮的虚线)dragover
:您可以在此处设置event.dataTransfer.dropEffect
属性以显示其中一种本机光标类型.默认是'move'
这里,但我将它设置为'copy'
因为我实际上并没有删除<img>
元素(其实在fiddle中你可以,例如创建几个McClures).dragleave
(这里去掉了虚线)drop
:此事件的处理程序创建并添加fabric.Image
对象(参见小提琴).
dragenter
(added a class to give the canvas container that nifty dotted line)dragover
: Here you can set theevent.dataTransfer.dropEffect
property to show one of the native cursor types. The default would be'move'
here, but I set it to'copy'
since I don't actually remove the<img>
element (in fact in the fiddle you can, for example create several McClures).dragleave
(removed the dotted line here)drop
: The handler for this event creates and adds thefabric.Image
object (see the fiddle).
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
// Bind the event listeners for the image elements
var images = document.querySelectorAll('#images img');
[].forEach.call(images, function (img) {
img.addEventListener('dragstart', handleDragStart, false);
img.addEventListener('dragend', handleDragEnd, false);
});
// Bind the event listeners for the canvas
var canvasContainer = document.getElementById('canvas-container');
canvasContainer.addEventListener('dragenter', handleDragEnter, false);
canvasContainer.addEventListener('dragover', handleDragOver, false);
canvasContainer.addEventListener('dragleave', handleDragLeave, false);
canvasContainer.addEventListener('drop', handleDrop, false);
} else {
// Replace with a fallback to a library solution.
alert("This browser doesn't support the HTML5 Drag and Drop API.");
}
来源:
- HTML5 Rocks - 原生 HTML5 拖放
- Modernizr
- Web 平台文档 > DOM > 属性 - dropEffect
- Web 平台文档 > DOM > 事件
这篇关于拖放到 Fabric.js 画布中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!