単純なファブリックjsベースのアプリケーションがあり、ユーザーが図形を追加してそれらを接続し、アニメーション化できるようにします。
以下は私のJSです
var canvas;
window.newAnimation = function(){
canvas = new fabric.Canvas('canvas');
}
window.addRect = function(){
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
});
canvas.add(rect);
}
window.addCircle = function(){
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
canvas.add(circle);
}
これは私の Fiddle です。新しいアニメーションをクリックして、今すぐオブジェクトを追加できます。
ユーザーにオブジェクトを選択してもらい、それを削除できるようにする方法がわかりません。私はこれを見つけました html5のfabric.jsキャンバスで複数のオブジェクトを一度に削除 しかし、私はそれを正常に実装することができませんでした。基本的に、ユーザーがオブジェクトを選択して削除できるようにします。
たとえば、remove()メソッドを使用できます。
window.deleteObject = function() {
canvas.getActiveObject().remove();
}
Fabric.jsの新しいバージョンがリリースされたので、次を使用する必要があります。
canvas.remove(canvas.getActiveObject());
選択したすべてのオブジェクトを削除します。
canvas.getActiveObjects().forEach((obj) => {
canvas.remove(obj)
});
canvas.discardActiveObject().renderAll()
Fabric JS 2.3.6を使用しています。
ユーザーがキャンバス上の1つ以上のオブジェクトを選択し、削除ボタンをクリックしてそれらを削除できるようにしたかったのです。
古いバージョンからメソッドを削除
ActiveSelectionの導入以降、次のメソッドは使用できなくなりました。
setActiveGroup(group);
getActiveGroup();
deactivateAll();
discardActiveGroup();
deactivateAllWithDispatch();
これは私にとってうまく機能する私のコードであり、うまくいけばあなたもそうです。
$('html').keyup(function(e){
if(e.keyCode == 46) {
deleteSelectedObjectsFromCanvas();
}
});
function deleteSelectedObjectsFromCanvas(){
var selection = canvas.getActiveObject();
if (selection.type === 'activeSelection') {
selection.forEachObject(function(element) {
console.log(element);
canvas.remove(element);
});
}
else{
canvas.remove(selection);
}
canvas.discardActiveObject();
canvas.requestRenderAll();
}
バックスペースキーを使用してアクティブなオブジェクトを削除できます
$(document).keydown(function(event){
if (event.which == 8) {
if (canvas.getActiveObject()) {
canvas.getActiveObject().remove();
}
}
});