<canvas id="myCanvas" ref="myCanvas" >
? </canvas>
const flag = ref(false)
const rectWidth = ref(0)//矩形框的寬
const rectHeight = ref(0) //矩形框的高
const totalRect = reactive([])? //畫的所有的矩形坐標(biāo)長(zhǎng)度數(shù)據(jù)存儲(chǔ)在數(shù)組中
const downX = ref(0)//鼠標(biāo)點(diǎn)擊圖片落下時(shí)的位置（X）
const downY = ref(0)//鼠標(biāo)點(diǎn)擊圖片落下時(shí)的位置（Y）
const ctx = ref("")//dom節(jié)點(diǎn)
const delIndex = ref(null)//刪除時(shí)選中的矩形框的index
const? myCanvas = ref(null);
const canvas = myCanvas.value;
const atime = ref('');
// // 放下鼠標(biāo)
const mousedown= (e)=>{
? console.log("鼠標(biāo)落下");
? atime.value= new Date().getTime();
? flag.value= true;
? downX.value= e.offsetX; // 鼠標(biāo)落下時(shí)的X
? downY.value= e.offsetY; // 鼠標(biāo)落下時(shí)的X
? mousemove(e);
}
// // 移動(dòng)鼠標(biāo)
const mousemove=(e)=>{
? if(flag.value){
? ? //判斷如果重右下往左上畫褪秀，這種畫法直接return
? ? if(downX.value- e.offsetX> 0 || downY.value- e.offsetY> 0){
? ? ? console.log("重右下往左上畫");
? ? return
? ? }else{
? ? ? console.log("重左上往右下畫");
//? ? ? //如果重左上往右下畫小槐，計(jì)算出鼠標(biāo)移動(dòng)的距離誓沸，也就是矩形框的寬和高
? ? ? rectWidth.value= Math.abs(downX.value- e.offsetX)
? ? ? rectHeight.value= Math.abs(downY.value- e.offsetY)
? ? ? console.log("this.rectWidth",? rectWidth.value);
? ? ? console.log("this.rectHeight", rectHeight.value);
//? ? ? //判斷這個(gè)寬高的長(zhǎng)度杏节，如果小于10，直接return鸵鸥，因?yàn)槭髽?biāo)移動(dòng)距離過(guò)于短
//? ? ? //防止點(diǎn)擊頁(yè)面時(shí),會(huì)畫成一個(gè)點(diǎn)颖侄，沒(méi)有意義
? ? ? if (rectWidth.value< 10 || rectHeight.value< 10) {
? ? ? ? console.log("只是點(diǎn)擊");
? ? ? ? rectWidth.value= 0;
? ? ? ? rectHeight.value= 0;
? ? ? ? return;
}
? ? ? clear();? //清空畫布
? ? ? redrawAll();
? ? drawRect(
? ? ? ? ? downX.value,
? ? ? ? ? downY.value,
? ? ? ? ? rectWidth.value,
? ? ? ? ? rectHeight.value
);
}
}
}
const redrawAll= ()=>{
? console.log("先畫之前畫過(guò)的圖，保證畫多個(gè)的時(shí)候看起來(lái)像前一個(gè)不消失");
? if(totalRect.length> 0){
? ? totalRect.forEach((e) => {
? ? ? drawRect(e.beforex, e.beforey, e.rectW, e.rectH);
});
}
}
// //清除畫布
const clear= ()=>{
? const canvas= myCanvas.value;
? let ctx= canvas.getContext("2d");
? ctx.clearRect(0, 0, canvas.width, canvas.height);
}
const drawRect= (x:any,y:any,lineW:any,lineY:any)=>{
? const canvas= myCanvas.value;
? let ctx= canvas.getContext("2d");
? //? 開(kāi)始繪制;
? ctx.beginPath();
? //? //設(shè)置線條顏色载萌，必須放在繪制之前
? ctx.strokeStyle= "#850a1e";
? console.log("44444444");
? // 線寬設(shè)置惧财，必須放在繪制之前
? ctx.lineWidth= 2;
? // strokeRect參數(shù)：（左上角x坐標(biāo)，y:左上角y坐標(biāo)扭仁，繪畫矩形的寬度垮衷，繪畫矩形的高度）
? ctx.strokeRect(x, y, lineW, lineY);
? console.log("66666666666666");
}
// //點(diǎn)擊畫布
const findRect= (e)=>{
? if (rectTag.value) {
? ? console.log("eeeeeeeeeee", e);
? ? console.log("this.totalRect", this.totalRect);
? ? //當(dāng)點(diǎn)擊畫布的時(shí)候，計(jì)算有沒(méi)有點(diǎn)再矩形框內(nèi)乖坠、哪個(gè)矩形框內(nèi)
? ? totalRect.map((item, index) => {
? ? ? if (
? ? ? ? ? e.offsetX- item.beforex> item.rectW||
? ? ? ? ? e.offsetX< item.beforex||
? ? ? ? e.offsetY- item.beforey> item.rectH||
? ? ? ? ? e.offsetY< item.beforey
){
? ? ? return;
? ? }else {
? ? ? ? //找到之后搀突，設(shè)置下標(biāo)
? ? ? ? delIndex.value= index;
? ? ? ? console.log("this.delIndex", this.delIndex);
}
})
}
}
//點(diǎn)擊刪除按鈕
del() {
? this.dialogVisible= false;
? //刪除
? this.ctx.clearRect(
? ? ? this.totalRect[this.delIndex].beforex- 2,
? ? ? this.totalRect[this.delIndex].beforey- 2,
? ? ? this.totalRect[this.delIndex].rectW+ 4,
? ? ? this.totalRect[this.delIndex].rectH+ 4
? );
? //刪掉totalRect的數(shù)據(jù)，真正的項(xiàng)目中需要調(diào)用后臺(tái)接口熊泵，刪掉數(shù)據(jù)庫(kù)中存儲(chǔ)的數(shù)據(jù)
? this.totalRect.splice(this.delIndex, 1);
? //刪掉之后仰迁，再畫一次，刷新頁(yè)面
? this.redrawAll();
? console.log(this.totalRect, "刪除了沒(méi)");
},
},
