mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
305 lines (304 loc) • 9.88 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.15.0
* Copyright (c) 2025 biaov
* @license MIT
*/
const O = (P, v) => {
const D = E("canvasRef"), w = P.minSize, $ = (i = 1) => Math.round(Math.random() * i), I = (i) => i[$(i.length - 1)], k = ({ ctx: i, cx: f, cy: m, r: p, x: b, y: h, tx: r, ty: u }, T, g) => {
const M = (g == null ? void 0 : g[0]) === T, t = !(g != null && g[1]);
switch (T) {
case "top":
M && (i.lineTo(f - p, h), i.arc(f, h, p, Math.PI, 0, t)), i.lineTo(r, h);
break;
case "right":
M && (i.lineTo(r, m - p), i.arc(r, m, p, 1.5 * Math.PI, 0.5 * Math.PI, t)), i.lineTo(r, u);
break;
case "bottom":
M && (i.lineTo(f + p, u), i.arc(f, u, p, 0, Math.PI, t)), i.lineTo(b, u);
break;
case "left":
M && (i.lineTo(b, m + p), i.arc(b, m, p, 0.5 * Math.PI, 1.5 * Math.PI, t)), i.lineTo(b, h);
break;
}
}, U = ({ ctx: i, canvas: f, w: m, h: p, x: b, y: h }, [r, u]) => {
const [T, g] = 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, o = h + p, a = b + m / 2, d = h + p / 2, c = { ctx: i, r: M, tx: t, ty: o, x: b, y: h, cx: a, cy: d };
switch (T) {
case "top":
k(c, "top", ["top", g]), k(c, "right", u), k(c, "bottom", u), k(c, "left", u);
break;
case "right":
i.lineTo(t, h), k(c, "right", ["right", g]), k(c, "bottom", u), k(c, "left", u);
break;
case "bottom":
i.lineTo(t, h), i.lineTo(t, o), k(c, "bottom", ["bottom", g]), k(c, "left", u);
break;
case "left":
i.lineTo(t, h), i.lineTo(t, o), i.lineTo(b, o), k(c, "left", ["left", g]);
break;
case "no":
i.lineTo(t, h), i.lineTo(t, o), i.lineTo(b, o), i.lineTo(b, h);
break;
}
i.clip(), i.closePath(), i.drawImage(S, 0, 0, S.width, S.height), i.stroke();
}, N = (i) => ["top", "right", "bottom", "left"].findIndex((f) => f === i), W = (i, f, m) => {
const { circle1: p, circle2: b, w: h, h: r, x: u, y: T } = i;
let g;
if (b) {
const M = N(p[0]), t = N(b[0]);
g = [p, b], M > t && g.reverse();
} else
g = [p];
return m.save(), U({ canvas: f, ctx: m, w: h, h: r, x: u, y: T }, g), 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: p } = 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 = p;
let [h, r] = P.gutter || [];
h ?? (h = ~~(m / w)), r ?? (r = ~~(f / w));
const u = f / r, T = m / h, g = { w: ~~u, h: ~~T };
C.value = Array.from({ length: h * r }, (M, t) => {
let o, a = null, d = $(), c = $();
const L = t / r, R = t % r;
if (L < 1)
if (R < 1)
o = "right", a = "bottom", s({
id: t + 1,
circle1: ["left", +!d]
}), s({
id: t + r,
circle1: ["top", +!c]
});
else if (R >= r - 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
o = e.circle1[0], d = e.circle1[1], a = "bottom", n.splice(l, 1), s({
id: t + r,
circle1: ["top", +!c]
});
} else
o = "bottom", s({
id: t + r,
circle1: ["top", +!d]
});
} else {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
o = e.circle1[0], d = e.circle1[1], n.splice(l, 1);
} else
switch (o = I(["right", "bottom"]), o) {
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 !== o)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!c]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!c]
});
break;
}
}
else if (L >= h - 1)
if (R < 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
o = e.circle1[0], d = e.circle1[1], n.splice(l, 1), a = "right", s({
id: t + 1,
circle1: ["left", +!c]
});
} else
o = "right", s({
id: t + 1,
circle1: ["left", +!d]
});
} else if (R >= r - 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
o = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2 && (a = e.circle2[0], c = e.circle2[1]);
} else
o = "no";
} else {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
o = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2 ? (a = e.circle2[0], c = e.circle2[1]) : (a = "right", s({
id: t + 1,
circle1: ["left", +!c]
}));
} else
o = "right", s({
id: t + 1,
circle1: ["left", +!d]
});
}
else if (R < 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
if (o = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2)
a = e.circle2[0], c = e.circle2[1];
else
switch (a = I(["right", "bottom"].filter((z) => z !== o)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!c]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!c]
});
break;
}
} else {
switch (o = I(["right", "bottom"]), o) {
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 !== o)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!c]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!c]
});
break;
}
}
} else if (R >= r - 1) {
const l = n.findIndex((e) => e.id === t);
if (l >= 0) {
const e = n[l];
o = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2 ? (a = e.circle2[0], c = e.circle2[1]) : (a = "bottom", s({
id: t + r,
circle1: ["top", +!c]
}));
} else
o = "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 (o = e.circle1[0], d = e.circle1[1], n.splice(l, 1), e.circle2)
a = e.circle2[0], c = e.circle2[1];
else
switch (a = I(["right", "bottom"].filter((z) => z !== o)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!c]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!c]
});
}
} else {
switch (o = I(["right", "bottom"]), o) {
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 !== o)), a) {
case "right":
s({
id: t + 1,
circle1: ["left", +!c]
});
break;
case "bottom":
s({
id: t + r,
circle1: ["top", +!c]
});
break;
}
}
}
const A = {
...g,
x: R * u,
y: ~~L * T,
circle1: [o, d],
circle2: a ? [a, c] : void 0
};
return {
// ...result,
base64: W(A, i, b),
animation: I(j)
};
}), v("load", C.value);
}), { base64Data: C };
}, Q = (P) => {
const v = (w) => `${+w}` == `${w}` ? `${w}px` : w;
return { getStyle: _(() => ({
width: v(P.width),
height: v(P.height)
})) };
};
export {
O as useHandle,
Q as useStyle
};