Ziehen, Löschen und Löschen von Objekten auf der FabricJS-Leinwand

Ich habe Probleme beim Ziehen, Ablegen und Löschen, um mit JQuery an einem FabricJS zu arbeiten.Ziehen, Löschen und Löschen von Objekten auf der FabricJS-Leinwand

Wählen Sie ein Objekt und klicken Sie auf Löschen funktioniert ohne Probleme.

Hier ist eine Demo von meinem Code Fiddle

Ich kann ziehen, droppen bekommen und lösche außerhalb von FabricJS (Just Ziehen nicht verwandte Elemente löschen) zu arbeiten, aber ich habe Schwierigkeiten, die zwei Kämme.

Vielleicht muss ich die Schaltfläche zum Löschen in die Zeichenfläche integrieren, damit der "Tropfen" funktioniert? Wenn ich das versuche, verschwindet das #delete Element.

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>

(ich habe nicht meine CSS einfügen als das ist nicht besonders relevant)

Quelle

2017-03-17 GoldenGonaz

Ich hinterließ eine Antwort unten, lassen Sie mich wissen, wenn Sie noch etwas brauchen? Ihre Neigung, in die Leinwand aufzunehmen, ist wahrscheinlich die beste Wahl. –

@TimHarker Vielen Dank für die Hilfe, das ist fantastisch. Nichts anderes, danke, ich werde versuchen, selbst weiter zu kommen, ich werde von meinem Kampf lernen: D sowie einige Zeit mit Blick auf deinen Code, um es besser zu verstehen – GoldenGonaz

Keine Sorge. Stellen Sie einfach eine andere Frage, wenn Sie etwas haben, glücklich, wieder zu helfen. –

Dies sollte Sie in der Nähe erhalten:

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); 
    } 
});

Hier ist Ihre JSFiddl e aktualisiert, https://jsfiddle.net/rekrah/jgruwse0/.

Lassen Sie mich wissen, wenn Sie weitere Fragen haben.

Quelle

2017-03-17 14:44:31

Ziehen, Löschen und Löschen von Objekten auf der FabricJS-Leinwand

Antwort

Verwandte Themen