FabricJSキャンバス上のオブジェクトのドラッグ、ドロップ、削除

Question

JQueryを使用してFabricJS上でドラッグ、ドロップ、削除を行って問題が発生しています。

オブジェクトを選択し、[削除]をクリックしても問題は発生していません。

は、ここに私のコードFiddle

私はドラッグ＆ドロップを取得し、FabricJS（だけ削除するには、無関係な要素をドラッグ）が、私は難易度2コーミングを抱えているの外で働くために削除することができますのデモです。

「ドロップ」が機能するにはキャンバス内に削除ボタンを組み込む必要がありますか？これを試すと#delete要素が消えます。

JS

var canvas = new fabric.Canvas('canvas'); 
$("#delete").click(function() { 
    deleteObjects(); 
}); 

//Test objects on the canvas 
//Circle 
var circle = new fabric.Circle({ 
    left: 200, 
    top: 150, 
    radius: 30, 
    fill: "#ff0072" 
}); 
circle.hasRotatingPoint = true; 
canvas.add(circle); 

// adding triangle 
var triangle = new fabric.Triangle({ 
    left: 130, 
    top: 150, 
    strokeWidth: 1, 
    width: 70, 
    height: 60, 
    fill: '#00b4ff', 
    selectable: true, 
    originX: 'center' 
}); 
triangle.hasRotatingPoint = true; 
canvas.add(triangle); 

//Select all objects 
function deleteObjects() { 
    var activeObject = canvas.getActiveObject(), 
    activeGroup = canvas.getActiveGroup(); 
    if (activeObject) { 
    canvas.remove(activeObject); 
    } 
} 
//Drag and drop delete 
$(function() { 
    $('#delete').droppable({ 
    drop: function(event, ui) { 
     deleteObjects(); 
    } 
    }); 
}); 

HTML

<section class="canvas__container"> 
    <canvas id="canvas" width="400" height="400"></canvas> 
    <div id="delete">&#x267B;</div> 
</section> 

（それは特に関係はないと私は私のCSSを貼り付けていなかった）

Answer 1

これは、近くにあなたを取得する必要があります。

var bin; 
var selectedObject; 
fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAA1CAIAAABuhDQnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAPPSURBVGhDzZd9U+IwEIfv+3+2Gxln9PAEcYRBURQVkVeFe9rdC2laIFsK+Pzh2Cab/ZF9Sfpr9bMpr+/r6+v5+fn+/v5vyuXl5e8U/uGx2Wwy9Pr6yjQ1KIVZ32w2e3x8xL2oiYHJmGCoS1gw6MPB7e2t+iwF5laVUfqIEcGq1WrqZw9YhKXig75bHzlUiTIfFmRZdbCVHfrIG13yALC4utnMRn2EYM9siwEX22NdrA8b1y8ODY62SCzWd4Sd88GdOs5RoO+gObeJTbkY6qOs1OLoFFZ0Rh95UHkriQfX+UTM6Ot2uzr3RCBApfxnrY+T54SbJyAgOADX+krX7NnZGTeAm5ub8/NzfbUHQS2rPlTruJFOp7NYLGQR+P7+5vHz8/Pl5eX6+lonGfG3UPWV6ykPDw/L5VJWyIPQcjHxe43qM93nBEz8nSvk4+OD6KtBNKys9qKPqtYRC3d3d/P5XFYRptMpBei/ZGXyUg0suEaT6OOarq/toHI8HrPIZDLhWn91dTUajdKVE4g+tz2dasH16kSfte1Rp29vb71e7+LiQt78SeFRtPqQ7ExmVGZG4hphoo8fra+jQRx7A5QqJeySjJoNgs5jueQW8zL6Wq0WqSb2wnA41LG0gbm6YRqKUW+9rSFJVkj0mYxJsqDFs4s0Gh1OISlJcGJdr9cRR3ytvQZJsniiT9/FQeMVSwe+86240WiQjuDKxXozEiuzPupULB00OR3Lgmg/DTA09UKxMsfX10fuE8cguA6izHGnU9PJ5IaO7SITX1N9uPjijx1CXKFXCpDR4MfEO8rUh6n+3a5QFqQUGSbvaYrtdnswGBBThqghioO6Tr0kUCUyM4ZMfzH1Z3IoSEGksFVPT0/6nELcqQz2TB4R7X5JDJn+bD3fAilsJx0xyDYftDKqxnFkzjfs9XUcHPmYiD0QTQ5ZttDtVkC/31fLaNz6iT6wHkFsuRgKoiB/+ML7+7uprYBLPlB91vspLjFxv1J6L3/JRU5kV0C0RlPaCQX3U9bVQSOcEySftBguCpSwvN8H//xUfVDuLl45yFBBKWt9qP4J35d+5cFaH1gvqpXj2p4jow/tJ9zC/OZBRh9Yb0EV4nqyT6gPyn0L74nfU3wK9MGRazmoWZ9ifeSB9YuhNDjKp52jWB9gc4RdxMUWcbBRn3DQXNyUcz479AFlVXnTYcHCas2zWx8QAjpnJSpZhKW2x9QnSp/AAbhnRmLun/0xGPQJOCBvTPdFJmNiVSaY9TmIETlEsHDP55brR/zDIy8ZYkJ8KAspr+84/Gx9q9U/+FfCZwDz5ogAAAAASUVORK5CYII=', function(img) { 
    img.set({ 
    left: 174, 
    top: 329, 
    selectable: false 
    }); 
    bin = img; 
    canvas.add(img, circle, triangle); 
}); 
canvas.on('object:selected', function(evn) { 
    selectedObject = evn.target; 
}) 
canvas.on('mouse:up', function(evn) { 
    var x = evn.e.offsetX; 
    var y = evn.e.offsetY; 
    if (x > bin.left && x < (bin.left + bin.width) && 
    y > bin.top && y < (bin.top + bin.height)) { 
    canvas.remove(selectedObject); 
    } 
}); 

あなたのJSFiddlはここにありますe更新、https://jsfiddle.net/rekrah/jgruwse0/。

ご質問がある場合はお知らせください。