fabricJs 在vue项目中的实战记录（三）元素的上移层级、下移层级以及删除

在阅读以下文章的基础上查看本篇笔记：

第一篇：fabricJs 在vue项目中的实战记录（一）引入以及初始化
第二篇：fabricJs 在vue项目中的实战记录（二）fabricjs设置海报背景（图片以及纯色）

1、前言：

// 1、getActiveObject() : 获取当前选中的元素
// 2、bringForward() : 上移层级
// 3、sendBackwards() : 下移层级
// 4、renderAll：重新渲染画布
// 5、remove : 删除元素

2、template 页面布局：

<div class="zindexBtnBan">
   <div @click="changeZindexHandle('add')" class="typeBtnBanpipe">上移层级</div>
   <div @click="changeZindexHandle('down')" class="typeBtnBanpipe">下移层级</div>
   <div @click="deleteEditHandle()">删除</div>
</div>

3、script 方法调用

<script>
export default {
    methods:{
       // 层级改变事件
       changeZindexHandle(type) {
           var level = imageEffectCanvas.getActiveObject();// 获取当前被选中的元素
           if(type == 'add') {
               imageEffectCanvas.bringForward(level); // 上移
           } else {
               imageEffectCanvas.sendBackwards(level); // 下移
           }
           imageEffectCanvas.renderAll(); //重新渲染
       },
       // 删除元素
       deleteEditHandle() {
            let activeObject;
            activeObject = imageEffectCanvas.getActiveObject(); // 获取当前被选中的元素
                if(activeObject) {
                    imageEffectCanvas.remove(activeObject); //删除元素
                }
	   },

   }
}
</script>

4、效果功能图：