mine-h5-ui/es/MeMspaint/hooks.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { ref as a, computed as i, onMounted as v } from "vue";
const h = ({ props: u, modelValue: m }) => {
  const r = a(), l = i(() => {
    switch (u.borderStyle) {
      case !0:
        return "1px solid rgba(0,0,0,0.2)";
      case !1:
        return "0px solid rgba(0,0,0,0.2)";
      default:
        return u.borderStyle;
    }
  }), d = ({ clientX: o, clientY: e }) => {
    const { offsetLeft: t, offsetTop: n } = r.value;
    return {
      x: o - t + parseInt(l.value, 10),
      y: e - n + parseInt(l.value, 10)
    };
  }, c = (o) => d(o.touches[0]), s = (o) => d(o);
  return v(() => {
    if (!u.visible) return;
    const o = r.value;
    m.value = o;
    const e = o.getContext("2d");
    e.strokeStyle = u.strokeStyle, e.lineWidth = u.lineWidth, o.ontouchstart = (t) => {
      e.moveTo(c(t).x, c(t).y), document.ontouchmove = (n) => {
        e.lineTo(c(n).x, c(n).y), e.stroke();
      }, document.ontouchend = () => {
        document.ontouchmove = null, document.ontouchend = null;
      };
    }, o.onmousedown = (t) => {
      e.moveTo(s(t).x, s(t).y), document.onmousemove = (n) => {
        e.lineTo(s(n).x, s(n).y), e.stroke();
      }, document.onmouseup = () => {
        document.onmousemove = null, document.onmouseup = null;
      };
    };
  }), { canvasRef: r, getBorder: l };
};
export {
  h as useDraw
};