前言
今天繼續和大家分享一下幾何畫板的圖層管理和實時縮略圖的實現。
demo演示
按照筆者的寫作習慣, 這里先和大家演示一下實現的效果:
可以看到通過操作圖層面板我們可以輕松的切換到某一個元素并對元素進行編輯, 同時在每次操作之后右下角的縮略圖會實時展示畫布最新的變動。
源碼地址: https://gitee.com/lowcode-china/euryd
接下來就讓我們接著之前的內容, 來實現我們的圖層管理面板和實時縮略圖。
技術實現
接下來我還是用大家最最熟悉的 vue3 + ts 來實現, 其他框架實現原理類似, 感興趣的朋友也可以舉一反三, 自行實現。
圖層管理面板的實現
圖層管理面板主要是為了更方便管理和操作畫布中的元素, 比如 PhotoShop 里的圖層管理:
或者 H5-Dooring 頁面制作平臺的圖層面板:
我們可以從這些編輯器中總結出圖層管理的幾個主要功能:
- 定位或切換元素
- 顯示隱藏元素
- 編輯元素(如刪除)
- 批量操作(如多選批量刪除元素等)
- 調整元素位置(順序)
所以說我們在設計圖層面板的時候也可以考慮以上幾個點, 接下來我就來構建一下圖層面板, 并實現切換元素,刪除指定元素 的功能。
1. 構建圖層面板
由于圖層面板的元素和畫布實際的元素數據是一一對應的, 所以我們可以直接用 canvasBox 來渲染圖層列表, 這里回顧一下 canvasBox 的數據結構:
type shapeType = "rect" | "circle" | "line";
interface IBaseShapeProp {
type: shapeType;
key: string;
style: any;
}
const canvasBox = ref<{ [key in shapeType]: IBaseShapeProp[] }>({
rect: [],
circle: [],
line: [],
});
其中每個元素都包含如下三個關鍵屬性:
- key 元素的唯一id
- type 元素的類型(矩形, 圓形, 線等)
- style 元素的樣式
這樣我們就可以利用 key 來輕松的定位元素, 如果畫布中元素很多(比如復雜的設計稿), 我們還可以給圖層面板添加搜索和分類功能, 方便我們更高效的定位元素。
一個簡單實現的案例如下:
<div v-show="layerVisible" class="layerWrap">
<h3>圖層管理</h3>
<div v-for="item in canvasBox.rect" :key="item.key" class="layerItem">
<span @click.stop="handleSelected(item.key)">{{ item.key }}</span>
<span @click="handleDelItem(item.key)"> 刪除 </span>
</div>
</div>
css樣式如下:
.layerWrap {
position: absolute;
left: 60px;
margin-top: -20px;
padding-top: 10px;
padding-bottom: 10px;
width: 160px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
color: #888;
.layerItem {
&:hover {
background-color: rgba(110, 38, 236, 0.1);
}
span:last-child {
margin-left: 20px;
}
}
}這里分享一下具體實現效果:
由于我們應用是用vue3的組合式函數寫的, 上圖中涉及到的切換元素和刪除元素的方法也很簡單, 具體如下:
import { ref } from "vue";
const curSelect = ref("");
const canvasBox = ref<{ [key in shapeType]: IBaseShapeProp[] }>({
rect: [],
circle: [],
line: [],
});
// 選擇元素
const handleSelected = (key: string) => {
curSelect.value = key;
};
// 刪除元素
const handleDelItem = (key: string) => {
canvasBox.value.rect = canvasBox.value.rect.filter((v) => v.key !== key);
};所以說圖層管理的本質是基于已有的圖元進行數據結構層面的操作。
當然大家也可以擴展我們的畫板應用, 讓它支持多選, 搜索, 排列順序等功能。
實時縮略圖的實現
我們之前也許看過一些網站在瀏覽頁面的時候會出現小的縮略圖, 可以實時展示當前頁面的情況, 比如:
這里就簡單和大家分享一下實現方案。
因為我們在畫布中的每一次操作都會被記錄在 recordManager (記錄管理器, 也就是上篇文章介紹的撤銷重做的歷史快照集合)中, 我們只需要在每次操作后基于當前 dom 生成一張圖片即可(畫布如果是canvas實現的, miniMap實現起來會更簡單)。
所以說我們現在的問題就變成了如何基于 dom 生成圖片快照的問題了, 當然這里也有解決方案, 核心思路就是將 dom 轉換成 xml 結構，然后放在標簽內，借助 svg 的處理能力將 dom 結構轉換成 svg 標簽，然后將svg標簽作為圖片的 base64 地址，最后用 a 標簽實現下載。不過需要注意以下兩個細節:
- img標簽的地址必須是base64字符串, 所以我們需要用canvas轉換成base64
- canvas標簽直接轉成xml是無法顯示的, 所以我們需要將canvas轉換成base64,再放入圖片的src內
通過以上方式我們就可以原生實現將 dom 轉換為圖片。當然市面上也有比較成熟的方案, 比如:
那這里我就用 dom2image 帶大家一起實現一下 miniMap。
首先我們在vite 工程中安裝該庫:
具體實現:
const pushRecordFn = (
state: { [key in shapeType]: IBaseShapeProp[] },
prevState: { [key in shapeType]: IBaseShapeProp[] }
) => {
// 生成mini縮略圖片
domtoimage
.toPng(boardDom?.value?.boardDom)
.then(function (dataUrl: string) {
miniImg.value = dataUrl;
})
.catch(function (error: Error) {
console.error("腳本錯誤!", error);
});
const { snapshots, maxLimit, curIndex } = recordManager.value;
// 如果兩個狀態相同, 則不推入歷史記錄
if (!diff(state, snapshots[curIndex])) {
return;
}
// 如果在撤銷的過程中重新執行了新的操作, 則覆蓋上一個狀態
if (snapshots.length - 1 !== curIndex) {
snapshots.splice(curIndex + 1, snapshots.length);
}
// 超過了最大限制記錄
if (snapshots.length >= maxLimit) {
snapshots.shift();
}
recordManager.value.snapshots.push(cloneDeep(state));
recordManager.value.curIndex = recordManager.value.snapshots.length - 1;
};
好了, 以上就實現了我們的miniMap 縮略圖功能, 演示如下:
