<script lang="ts" setup>
import { ref, watch, onMounted,onUnmounted } from "vue";
interface IProps {
/**
* @description 畫布寬度
* @default 400
*/
width?: number;
/**
* @description 畫布高度
* @default 200
*/
height?: number;
/**
* @description 線寬
* @default 4
*/
lineWidth?: number;
/**
* @description 線段顏色
* @default 'red'
*/
strokeColor?: string;
/**
* @description 設(shè)置線條兩端圓角
* @default 'round'
*/
lineCap?: string;
/**
* @description 線條交匯處圓角
* @default 'round'
*/
lineJoin?: string;
/**
* @description 畫布背景顏色
* @default 'transparent'
*/
bgColor?: string;
/**
* @description true
*/
showBtn?: boolean;
/**
* @description 當(dāng)保存時(shí)的回調(diào), blob為生成的圖片bob
* @default -
*/
onSave?: (blob: Blob) => void;
/**
* @description 當(dāng)畫布清空時(shí)的回調(diào), 參數(shù)為畫布的上下文對象,可以直接使用canvas的api
* @default -
*/
onClear?: (canvasContext: CanvasRenderingContext2D) => void;
/**
* @description 當(dāng)畫布結(jié)束時(shí)的回調(diào)
* @default -
*/
onDrawEnd?: (canvas: HTMLCanvasElement) => void;
}
const props = withDefaults(defineProps<IProps>(), {
width: 400,
height: 200,
lineWidth:4,
strokeColor:'green',
lineCap:'round',
lineJoin:'round',
bgColor:'transparent',
showBtn:true
});
const {
width,
height,
lineWidth,
strokeColor,
lineCap,
lineJoin,
bgColor,
showBtn,
onSave,
onClear,
onDrawEnd
} = props;
const canvasRef = ref<any>(null);
const ctxRef = ref<any>(null);
// 保存上次繪制的 坐標(biāo)及偏移量
const client = ref<any>({
offsetX: 0, // 偏移量
offsetY: 0,
endX: 0, // 坐標(biāo)
endY: 0
})
// 判斷是否為移動(dòng)端
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent));
// 取消-清空畫布
const cancel = () => {
// 清空當(dāng)前畫布上的所有繪制內(nèi)容
if(canvasRef.value) {
const canvasCtx = canvasRef.value.getContext("2d");
canvasCtx.clearRect(0, 0, width, height);
onClear && onClear(canvasRef.value)
}
}
// 保存-將畫布內(nèi)容保存為圖片
const save = () => {
// 將canvas上的內(nèi)容轉(zhuǎn)成blob流
canvasRef.value.toBlob((blob: any) => {
// 獲取當(dāng)前時(shí)間并轉(zhuǎn)成字符串，用來當(dāng)做文件名
const date = Date.now().toString()
// 創(chuàng)建一個(gè) a 標(biāo)簽
const a = document.createElement('a')
// 設(shè)置 a 標(biāo)簽的下載文件名
a.download = `${date}.png`
// 設(shè)置 a 標(biāo)簽的跳轉(zhuǎn)路徑為 文件流地址
a.href = URL.createObjectURL(blob)
// 手動(dòng)觸發(fā) a 標(biāo)簽的點(diǎn)擊事件
a.click()
// 移除 a 標(biāo)簽
a.remove()
onSave && onSave(blob);
})
}
// 繪制
const draw = (event: { changedTouches?: any; pageX?: any; pageY?: any; }) => {
// 獲取當(dāng)前坐標(biāo)點(diǎn)位
const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event
// 獲取canvas 實(shí)例
const canvas:HTMLCanvasElement = canvasRef.value as any;
const { x, y } = canvas.getBoundingClientRect();
// 修改最后一次繪制的坐標(biāo)點(diǎn)
client.value.endX = pageX
client.value.endY = pageY
// 根據(jù)坐標(biāo)點(diǎn)位移動(dòng)添加線條
ctxRef.value.lineTo(pageX - x, pageY - y)
// 繪制
ctxRef.value .stroke()
};
// 初始化
const init = (event: { changedTouches?: any; offsetX?: any; offsetY?: any; pageX?: any; pageY?: any; }) => {
// 獲取偏移量及坐標(biāo)
const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event;
const canvas:HTMLCanvasElement = canvasRef.value as any;
const { x, y } = canvas.getBoundingClientRect();
client.value.offsetX = offsetX
client.value.offsetY = offsetY
client.value.endX = pageX
client.value.endY = pageY
// 清除以上一次 beginPath 之后的所有路徑，進(jìn)行繪制
ctxRef.value.beginPath()
// 根據(jù)配置文件設(shè)置相應(yīng)配置
ctxRef.value.lineWidth = lineWidth
ctxRef.value.strokeStyle = strokeColor
ctxRef.value.lineCap = lineCap
ctxRef.value.lineJoin = lineJoin
// 設(shè)置畫線起始點(diǎn)位
ctxRef.value.moveTo(client.value.endX - x, client.value.endY - y)
// 監(jiān)聽 鼠標(biāo)移動(dòng)或手勢移動(dòng)
window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
};
// 結(jié)束繪制
const closeDraw = () => {
console.log(ctxRef.value);
// 結(jié)束繪制
ctxRef.value.closePath()
// 移除鼠標(biāo)移動(dòng)或手勢移動(dòng)監(jiān)聽器
window.removeEventListener("mousemove", draw)
onDrawEnd && onDrawEnd(canvasRef.current)
};
const initCanvas =()=>{
// 獲取canvas 實(shí)例
const canvas:HTMLCanvasElement = canvasRef.value as any;
// 設(shè)置寬高
canvas.width = width;
canvas.height = height;
// 創(chuàng)建上下文
const ctx:any = canvas.getContext('2d');
ctxRef.value = ctx;
// 設(shè)置填充背景色
ctxRef.value.fillStyle = bgColor;
// 繪制填充矩形
ctxRef.value.fillRect(
0, // x 軸起始繪制位置
0, // y 軸起始繪制位置
width, // 寬度
height // 高度
);
}
const addEventListener=()=>{
// 創(chuàng)建鼠標(biāo)/手勢按下監(jiān)聽器
window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init);
// 創(chuàng)建鼠標(biāo)/手勢 彈起/離開 監(jiān)聽器
window.addEventListener(mobileStatus ? "touchend" : "mouseup", closeDraw);
}
const removeEventListener=()=>{
// 創(chuàng)建鼠標(biāo)/手勢按下監(jiān)聽器
window.removeEventListener(mobileStatus ? "touchstart" : "mousedown", init);
// 創(chuàng)建鼠標(biāo)/手勢 彈起/離開 監(jiān)聽器
window.removeEventListener(mobileStatus ? "touchend" : "mouseup", closeDraw);
}
const initEsign=()=>{
initCanvas();
addEventListener();
}
onMounted(() => {
initEsign();
});
onUnmounted(()=>{
removeEventListener();
});
</script>
