例如，我在画布上有多个对象， A ，* B *和 C 。其中三个对象被选为激活状态。通过使用Fabric.js，是否可以丢弃/停用一个对象？
例如，选中三个对象，然后单击画布外的按钮时，将丢弃/停用对象B.
我查看了FabricJS官方网站上的doc文件，我只找到 canvas.deactivateAll（）， canvas.discardActiveObject（）。这些函数只能在不是特定活动对象的情况下停用所有活动对象。
有人可以给我一个关于此的指南吗？谢谢！
答案 0 :(得分：49)
我可能迟到了，但在最新的fabricjs (1.4.3)中，您可以使用以下内容取消选择画布上的所有选定对象。
canvas.deactivateAll().renderAll();
我在创建该画布的图像之前使用它。希望它可以帮到某人。
答案 1 :(得分：13)
假设您有三个对象objectA，ObjectB和ObjectC以及对象被选中。现在，如果要取消选择任何对象（例如ObjectB）。在这种情况下，您可以尝试以下代码。
var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(ObjectB);
canvas.renderAll();
如果您只有一个节点处于活动状态，那么您可以这样做。
canvas.discardActiveObject();
canvas.renderAll();
答案 2 :(得分：11)
要丢弃您可以在功能下使用的所有活动组。当前活动的组和火灾事件如果由于鼠标事件而由结构调用该功能，则该事件将作为参数传递并发送到火灾功能自定义事件。当用作方法时，e param没有任何应用程序。
<div class="col-md-12">
<div class="portlet light bordered">
<div class="portlet-body">
<form action="{{ $formIs === 'add' ? route('campus-media.save', $campusId) : route('campus-media.update', [$campusId, $campusMedia->id]) }}" method="post" class="form-horizontal" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Title</label>
<div class="col-md-4">
{!! Form::text('title', $campusMedia->title, array('class' => 'form-control', 'placeholder' => 'Campus Media Title')) !!}
</div>
</div>
</div>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Media</label>
<div class="col-md-4">
{!! Form::file('media', $campusMedia->media, array('class' => 'form-control')) !!}
</div>
</div>
</div>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Media type</label>
<div class="col-md-4">
{!! Form::select('media_type', $fileType, $campusMedia->media_type,array('placeholder' => 'Choose media type', 'class' => 'form-control')) !!}
<span class="help-block">0: Image, 1: Video, 2: Logo</span>
</div>
</div>
</div>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Description</label>
<div class="col-md-4">
{!! Form::textarea('description', $campusMedia->description, array('class' => 'form-control', 'placeholder' => 'Campus Media Description', 'rows' => 3)) !!}
</div>
</div>
</div>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Status</label>
<div class="col-md-4">
{!! Form::select('status', $status, $campusMedia->status,array('placeholder' => 'Choose status', 'class' => 'form-control')) !!}
<span class="help-block">0: Inactive, 1: Active</span>
</div>
</div>
</div>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Tags</label>
<div class="col-md-4">
{!! Form::text('tags', $campusMedia->tags, array('class' => 'form-control', 'placeholder' => 'Campus Media Tags')) !!}
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<input type="submit" name="save" class="btn btn-primary" value="Save"/>
<a href="{{ route('campus-media.index', $campusId) }}" class="btn btn-default"> Cancel </a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
要丢弃sigle对象，您可以像这样使用。丢弃当前活动的对象和火灾事件。如果由于鼠标事件而由fabric调用该函数，则该事件将作为parmater传递并发送到fire函数以获取自定义事件。当用作方法时，e param没有任何应用程序。
class CampusMediaController extends Controller
{
//
public function index($campusId)
{
$campusMedia = CampusMedia::ofCampus($campusId)->get();
$data = [
'campusMedia' => $campusMedia,
'campusId' => $campusId
];
return view('campus-media.index', $data);
}
public function add($campusId)
{
$campusMedia = new CampusMedia;
$data = [
'campusMedia' => $campusMedia,
'campusId' => $campusId,
'fileType' => CampusMedia::getMediaType(),
'status' => CampusMedia::getStatus(),
'formIs' => 'add'
];
return view('campus-media.form', $data);
}
public function save(Request $request, $campusId)
{
$this->validation($request);
$post = $request->all();
$fileName = $this->upload($request, $campusId);
$campusMedia = $this->bindToObject($post, $fileName, $campusId);
$campusMedia->save();
return redirect()->route('campus-media.index', $campusId)->with('message','Item Succesfully Added');
}
public function edit($campusId, $id)
{
$campusMedia = CampusMedia::find($id);
$data = [
'campusMedia' => $campusMedia,
'campusId' => $campusId,
'fileType' => CampusMedia::getMediaType(),
'status' => CampusMedia::getStatus(),
'formIs' => 'edit'
];
return view('campus-media.form', $data);
}
public function update(Request $request,$campusId,$id)
{
$this->validation($request);
$post = $request->all();
$fileName = $this->upload($request, $campusId);
$campusMedia = $this->bindToObject($post, $fileName,$campusId,$id);
$campusMedia->save();
return redirect()->route('campus-media.index', $campusId)->with('message','Item updated Succesfully');
}
public function upload($request, $campusId)
{
$this->validate($request, [
'media' => 'mimes:png,jpeg,mp4,avi,mpeg,flv,m4v'
]
);
if($request->input('media_type') == 0){
$type = "image";
}elseif($request->input('media_type') == 1){
$type = "video";
}else{
$type = "logo";
}
$file = $request->file('media');
if(is_null($file))
return null;
$ext = $file->getClientOriginalExtension();
$fileName = sprintf('%s-%s-%s.%s',
$campusId,
$type,
time(),
$ext
);
$upload = config('app.upload_path').'/campus/'.$campusId;
$file->move($upload,$fileName);
return $fileName;
}
public function delete($campusId,$id)
{
$campusMedia = CampusMedia::find($id);
$campusMedia->delete();
return redirect()->route('campus-media.index', $campusId)->with('message','Item deleted Succesfully');
}
private function validation($request){
$this->validate($request, [
'media' => 'required'
]
);
}
private function bindToObject($post, $fileName,$campusId,$id=null)
{
if(is_null($id)){
$campusMedia = new CampusMedia;
} else {
$campusMedia = CampusMedia::find($id);
}
$campusMedia->campus_id = $campusId;
$campusMedia->title = $post['title'];
$campusMedia->media = $fileName;
$campusMedia->media_type = $post['media_type'];
$campusMedia->description = $post['description'];
$campusMedia->status = $post['status'];
$campusMedia->tags = $post['tags'];
return $campusMedia;
}
在最后，最后渲染顶部画布和辅助容器画布。
canvas.discardActiveGroup();
答案 3 :(得分：1)
我刚刚找到了这样做的方法：
当激活多个对象时，它们实际上形成了一个组。然后实际上只需要使用一个名为“removeWithUpdate”的fabric.group方法然后就可以了。
示例：
var activeGroup = canvas.getActiveGroup();
activeGroup.removeWithUpdate(theObject);
canvas.renderAll();
答案 4 :(得分：0)
只有更新
canvas.discardActiveObject()