在現代的 Web 開發中，表單是不可或缺的組件之一。用戶可以通過表單輸入和提交數據，而開發者則需要對這些數據進行處理和存儲。然而，在某些情況下，我們可能需要重置表單並恢復到最初的狀態。 本文介紹瞭如何使用 form 表單處理庫來實現表單恢復初始數據的功能。通過 form 提供的靈活性和方便性，我們... ...
最近在做的一個前端項目中，有一些圖像的處理操作（3D圖，2D圖都有），其中3D圖也是通過獲取後端服務的圖像2D數據進行繪製展示，通過滑鼠各種操作調用後端服務來進行重新獲取新圖數據。這裡前端設計到圖像的操作使用了PIXIJS，這裡將使用的方式做一個說明，以作參考。
首先pixijs的官網：https://pixijs.com/ pixijs的中文網使用（只有一些最基本的）：http://pixijs.huashengweilai.com/
理解pixijs的幾個對象： 最關鍵的三個就是： Application對象 ，sprites（精靈）與stage（舞臺）
Application：這個是用來創建Pixi應用的。PIXI.Application會自動選擇使用Canvas或者是WebGL來渲染圖形，這取決於您的瀏覽器支持情況。PIXI.Application有一個options對象，可以設置一些參數，比如顯示的區域的寬，高，，透明度，解析度等等等。具體官網有很詳細說明。
stage：來自PixiJS中文網的解釋，stage（舞臺）是Pixi的Container（容器）對象。你可以把一個Container（容器）想象成一種空盒子，它會把你放進去的東西組合在一起並儲存起來。stage（舞臺）對象是場景中所有可見事物的根容器。你在stage（舞臺）里放的任何東西都會在canvas畫面上渲染出來，。
sprite：sprite（精靈）是一種的特殊圖像對象。您可以控制它們的位置、大小和其他屬性，
總體的理解和使用步驟就是：首先用Application創建Pixi應用，當創建了Pixi應用後，舞臺容器也就自動創建了，可以理解為容器就是一個用來存放物體的東西，比如我們現實中的存錢罐，收納箱，衣櫃什麼的。可以通過應用對象訪問到舞臺。光有舞臺這個容器後，我們就是需要將物體放入進去，這裡的物體一般就是我們需要操作的圖像。我們通過sprite來加入進來。當然圖像渲染中自然少不了圖像紋理一說，可以使用YIPixi的loader載入圖像紋理並創建精靈，然後將其加入到Pixi的容器stage中，這樣就完成了Pixi的整個基本的過程。
我這裡是在vue3中使用的PixiJS，第一步創建Pixi應用，關鍵代碼如下：
import * as PIXI from 'pixi.js'; import '@pixi/unsafe-eval' let Pixi=new PIXI.Application({width:800,height:800});
第二步：將Pixi應用加入到頁面元素中展示。即在onMounted的勾子函數中調用如下代碼：document.getElementById("DivLeft3d").appendChild(Pixi.view); 將Pixi加入到頁面的的元素中，這裡“DivLeft3d”是我頁面中的一個div元素。
第三步：創建sprite並將其加入到Pixi的容器中進行展示：我這裡的示例代碼中是直接載入的圖像的二進位byte[]數據，註意Pixi的圖像數據格式是RGBA格式的。我之前這裡的數據格式BGRA的，導致顯示的圖像一直是一個顏色，搗鼓了一天才找到原因。針對Pixi的滑鼠事件，dataIndex是我的自定義參數，如果這裡不需要參數，可以直接用js箭頭函數。還有就是我這裡事件是卸載精靈上的，也可以寫在舞臺stage上來觸發，具體看各自使用。
`function pixiLoadImg(dataIndex，imagedata){
let pixelData=new Uint8Array(imagedata);
let sprite=PIXI.Sprite.from(PIXI.Texture.fromBuffer(pixelData, 800, 800, {resourceOptions: {width: 800, height: 800,format: 6408}}));
//對於有事件的精靈，通常需要設置sprite.interactive = true ， 對於作按鈕用的精靈，需要設置sprite.buttonMode = true;
sprite.buttonMode = true;
sprite.interactive = true;
//sprite.anchor.set(0.5) //設置錨點在中間
//這裡是針對精靈的一些滑鼠事件。
sprite.on('pointerdown',(event)=>{PIXImousedown(dataIndex,event)})
.on('pointerup',(event)=>{PIXImouseup(dataIndex,event)})
.on('pointermove',(event)=>{PIXImousemove(dataIndex,event)})
.on('pointerover',(event)=>{PIXImouseover(dataIndex,event)})
.on('pointerout',(event)=>{PIXImouseout(dataIndex,event)})
console.log("添加Pixi數據")
Pixi.stage.removeChildren();
Pixi.stage.addChild(sprite);
}另外需要註意的是在Pixi上是沒有mousewheel事件的。這個我們可以在更外層的元素上觸發這個事件，或者在整個window上監聽這個事件，然後判斷是否是Pixi上的操作即可，我這裡是中鍵進行縮放操作。參考代碼類似：window.addEventListener("mousewheel", (event) => {
console.log("mousewheel");
const step = event.wheelDelta > 0 ? 0.1 : -0.1
//event.preventDefault(); //阻止事件冒泡
if(selectDataIndex>0)
{
proxy.$axios.post(proxy.GLOBAL.baseUrl + 'Hear/MouseWheel',
{"dataIndex":selectDataIndex,"delta":event.deltaY})
.then((res)=>{
let byteBuffer= _base64ToArrayBuffer(res.data.base64Image);
//縮放圖像
pixiLoadImg(selectDataIndex,byteBuffer);
}).catch((res)=>{
alert("MouseMove異常");
console.log(res);
});
}
})`
最後，附帶獲取滑鼠在Pixi上的坐標位置的方法：
如果我們是用Pixi的精靈來觸發的，通過事件參數來獲取到位置信息：event.data.getLocalPosition(event.currentTarget.parent);，類似let currentPosition=event.data.getLocalPosition(event.currentTarget.parent);其中currentPosition.x和currentPosition.y就是對應的滑鼠坐標：
如果我們是用Pixi的舞臺上觸發的，通過舞臺上的事件參數來獲取位置信息：event.data.globalX和event.data.globalY就是對應的滑鼠位置。
