Vue 代碼示例
<div id="images">
<img draggable="true" @dragstart="handleDragEnter" src="http://i.imgur.com/8rmMZI3.jpg" width="250" height="250"></img>
<img draggable="true" @dragstart="handleDragEnter" src="http://i.imgur.com/q9aLMza.png" width="252" height="295"></img>
<img draggable="true" @dragstart="handleDragEnter" 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>
思路：
- 首先需要定義一個(gè)臨時(shí)變量 tempSrc痹雅， 用來(lái)存儲(chǔ)每次拖拽圖片的 src 地址
- 監(jiān)聽(tīng)每個(gè) img 的拖拽事件窘奏，將拖拽 target 的 src 存到 臨時(shí)變量 tempSrc 中
- 監(jiān)聽(tīng) canvas 的拖拽事件酸钦，將 tempSrc 添加到 canvas 中
偽代碼：
private handleDragEnter(e) {
// console.log("handleDragEnter:", e);
this.$emit("update:currDropImgUrl", e.target.currentSrc);
}
// canvas 監(jiān)聽(tīng)畫(huà)布拖拽事件
this.canvas.on("drop", (options: any) => {
console.log("drop：", options);
console.log("currDropImgUrl:", this.currDropImgUrl);
this.addImage({
file_url: this.currDropImgUrl,
angle: 0,
opacity: 1,
left: options.e.offsetX, // 圖片相對(duì)畫(huà)布的左側(cè)距離
top: options.e.offsetY, // 圖片相對(duì)畫(huà)布的頂部距離
});
});
參考鏈接：
[Drag and Drop into Fabric.js canvas](fabricjs - Drag and Drop into Fabric.js canvas - Stack Overflow
)
