mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
305 lines (304 loc) • 9.84 kB
JavaScript
import { useTemplateRef as E, ref as H, onMounted as K, computed as _ } from "vue";
import j from "./animationNames.js";
import { useImgInfo as q } from "../MeComposable/useImgInfo/index.js";
/*!
* mine-h5-ui v2.16.0
* Copyright (c) 2025 biaov
* @license MIT
*/
const O = (P, R) => {
const D = E("canvasNode"), w = P.minSize, $ = (i = 1) => Math.round(Math.random() * i), I = (i) => i[$(i.length - 1)], k = ({ ctx: i, cx: f, cy: m, r: g, x: b, y: h, tx: r, ty: p }, T, u) => {
const M = u?.[0] === T, t = !u?.[1];
switch (T) {
case "top":
M && (i.lineTo(f - g, h), i.arc(f, h, g, Math.PI, 0, t)), i.lineTo(r, h);
break;
case "right":
M && (i.lineTo(r, m - g), i.arc(r, m, g, 1.5 * Math.PI, 0.5 * Math.PI, t)), i.lineTo(r, p);
break;
case "bottom":
M && (i.lineTo(f + g, p), i.arc(f, p, g, 0, Math.PI, t)), i.lineTo(b, p);
break;
case "left":
M && (i.lineTo(b, m + g), i.arc(b, m, g, 0.5 * Math.PI, 1.5 * Math.PI, t)), i.lineTo(b, h);
break;
}
}, U = ({ ctx: i, canvas: f, w: m, h: g, x: b, y: h }, [r, p]) => {
const [T, u] = r;
i.lineWidth = P.lineWidth, i.strokeStyle = P.lineColor, i.clearRect(0, 0, f.width, f.height), i.beginPath(), i.moveTo(b, h);
const M = Math.round(m / 3 / 2), t = b + m, c = h + g, a = b + m / 2, d = h + g / 2, o = { ctx: i, r: M, tx: t, ty: c, x: b, y: h, cx: a, cy: d };
switch (T) {
case "top":
k(o, "top", ["top", u]), k(o, "right", p), k(o, "bottom", p), k(o, "left", p);
break;
case "right":
i.lineTo(t, h), k(o, "right", ["right", u]), k(o, "bottom", p), k(o, "left", p);
break;
case "bottom":
i.lineTo(t, h), i.lineTo(t, c), k(o, "bottom", ["bottom", u]), k(o, "left", p);
break;
case "left":
i.lineTo(t, h), i.lineTo(t, c), i.lineTo(b, c), k(o, "left", ["left", u]);
break;
case "no":
i.lineTo(t, h), i.lineTo(t, c), i.lineTo(b, c), i.lineTo(b, h);
break;
}
i.clip(), i.closePath(), i.drawImage(S, 0, 0, S.width, S.height), i.stroke();
}, z = (i) => ["top", "right", "bottom", "left"].findIndex((f) => f === i), W = (i, f, m) => {
const { circle1: g, circle2: b, w: h, h: r, x: p, y: T } = i;
let u;
if (b) {
const M = z(g[0]), t = z(b[0]);
u = [g, b], M > t && u.reverse();
} else
u = [g];
return m.save(), U({ canvas: f, ctx: m, w: h, h: r, x: p, y: T }, u), m.restore(), f.toDataURL("image/png", 1);
}, n = [], C = H([]), s = (i) => {
const f = n.find((m) => m.id === i.id);
f ? f.circle2 = i.circle1 : n.push(i);
};
let S;
return K(async () => {
if (!D.value) return;
const i = D.value, { width: f, height: m, image: g } = await q(P.url);
if (f < w * 2 || m < w * 2) throw new Error(`图片尺寸不能小于${w * 2}x${w * 2}`);
i.width = f, i.height = m;
const b = i.getContext("2d");
S = g;
let [h, r] = P.gutter || [];
h ??= ~~(m / w), r ??= ~~(f / w);
const p = f / r, T = m / h, u = { w: ~~p, h: ~~T };
C.value = Array.from({ length: h * r }, (M, t) => {
let c, a = null, d = $(), o = $();
const L = t / r, v = t % r;
if (L < 1)
if (v < 1)
c = "right", a = "bottom", s({
id: t + 1,
circle1: ["left", +!d]
}), s({
id: t + r,
circle1: ["top", +!o]
});
else if (v >= r - 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
c = e.circle1[0], d = e.circle1[1], a = "bottom", n.splice(l, 1), s({
id: t + r,
circle1: ["top", +!o]
});
} else
c = "bottom", s({
id: t + r,
circle1: ["top", +!d]
});
} else {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
c = e.circle1[0], d = e.circle1[1], n.splice(l, 1);
} else
switch (c = I(["right", "bottom"]), c) {
case "right":
s({
id: t + 1,
circle1: ["left", +!d]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!d]
});
}
switch (a = I(["right", "bottom"].filter((e) => e !== c)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!o]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!o]
});
break;
}
}
else if (L >= h - 1)
if (v < 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
c = e.circle1[0], d = e.circle1[1], n.splice(l, 1), a = "right", s({
id: t + 1,
circle1: ["left", +!o]
});
} else
c = "right", s({
id: t + 1,
circle1: ["left", +!d]
});
} else if (v >= r - 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
c = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2 && (a = e.circle2[0], o = e.circle2[1]);
} else
c = "no";
} else {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
c = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2 ? (a = e.circle2[0], o = e.circle2[1]) : (a = "right", s({
id: t + 1,
circle1: ["left", +!o]
}));
} else
c = "right", s({
id: t + 1,
circle1: ["left", +!d]
});
}
else if (v < 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
if (c = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2)
a = e.circle2[0], o = e.circle2[1];
else
switch (a = I(["right", "bottom"].filter((N) => N !== c)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!o]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!o]
});
break;
}
} else {
switch (c = I(["right", "bottom"]), c) {
case "right":
s({
id: t + 1,
circle1: ["left", +!d]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!d]
});
break;
}
switch (a = I(["right", "bottom"].filter((e) => e !== c)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!o]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!o]
});
break;
}
}
} else if (v >= r - 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
c = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2 ? (a = e.circle2[0], o = e.circle2[1]) : (a = "bottom", s({
id: t + r,
circle1: ["top", +!o]
}));
} else
c = "bottom", s({
id: t + r,
circle1: ["top", +!d]
});
} else {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
if (c = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2)
a = e.circle2[0], o = e.circle2[1];
else
switch (a = I(["right", "bottom"].filter((N) => N !== c)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!o]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!o]
});
}
} else {
switch (c = I(["right", "bottom"]), c) {
case "right":
s({
id: t + 1,
circle1: ["left", +!d]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!d]
});
}
switch (a = I(["right", "bottom"].filter((e) => e !== c)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!o]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!o]
});
break;
}
}
}
const A = {
...u,
x: v * p,
y: ~~L * T,
circle1: [c, d],
circle2: a ? [a, o] : void 0
};
return {
// ...result,
base64: W(A, i, b),
animation: I(j)
};
}), R("load", C.value);
}), { base64Data: C };
}, Q = (P) => {
const R = (w) => `${+w}` == `${w}` ? `${w}px` : w;
return { getStyle: _(() => ({
width: R(P.width),
height: R(P.height)
})) };
};
export {
O as useHandle,
Q as useStyle
};