222 lines
10 KiB
JavaScript
222 lines
10 KiB
JavaScript
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: !0
|
||
|
|
}), exports.default = void 0;
|
||
|
|
|
||
|
|
var t = require("@babel/runtime/helpers/toConsumableArray.js"), s = require("@babel/runtime/helpers/createForOfIteratorHelper.js"), e = require("@babel/runtime/helpers/classCallCheck.js"), i = require("@babel/runtime/helpers/createClass.js"), c = require("31180406E645A4CF577E6C018FB18D45.js"), h = function() {
|
||
|
|
function h(t, s) {
|
||
|
|
e(this, h), this.ctx = t, this.data = s;
|
||
|
|
}
|
||
|
|
return i(h, [ {
|
||
|
|
key: "paint",
|
||
|
|
value: function(t) {
|
||
|
|
this.style = {
|
||
|
|
width: this.data.width.toPx(),
|
||
|
|
height: this.data.height.toPx()
|
||
|
|
}, this._background();
|
||
|
|
var e, i = s(this.data.views);
|
||
|
|
try {
|
||
|
|
for (i.s(); !(e = i.n()).done; ) {
|
||
|
|
var c = e.value;
|
||
|
|
this._drawAbsolute(c);
|
||
|
|
}
|
||
|
|
} catch (t) {
|
||
|
|
t = VM2_INTERNAL_STATE_DO_NOT_USE_OR_PROGRAM_WILL_FAIL.handleException(t), i.e(t);
|
||
|
|
} finally {
|
||
|
|
i.f();
|
||
|
|
}
|
||
|
|
this.ctx.draw(!1, function() {
|
||
|
|
t();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_background",
|
||
|
|
value: function() {
|
||
|
|
this.ctx.save();
|
||
|
|
var t = this.style, s = t.width, e = t.height, i = this.data.background;
|
||
|
|
this.ctx.translate(s / 2, e / 2), this._doClip(this.data.borderRadius, s, e), i ? i.startsWith("#") || i.startsWith("rgba") || "transparent" === i.toLowerCase() ? (this.ctx.fillStyle = i,
|
||
|
|
this.ctx.fillRect(-s / 2, -e / 2, s, e)) : this.ctx.drawImage(i, -s / 2, -e / 2, s, e) : (this.ctx.fillStyle = "#fff",
|
||
|
|
this.ctx.fillRect(-s / 2, -e / 2, s, e)), this.ctx.restore();
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_drawAbsolute",
|
||
|
|
value: function(s) {
|
||
|
|
switch (s.css && s.css.length && (s.css = Object.assign.apply(Object, t(s.css))),
|
||
|
|
s.type) {
|
||
|
|
case "image":
|
||
|
|
this._drawAbsImage(s);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "text":
|
||
|
|
this._fillAbsText(s);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "rect":
|
||
|
|
this._drawAbsRect(s);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "qrcode":
|
||
|
|
this._drawQRCode(s);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_doClip",
|
||
|
|
value: function(t, s, e) {
|
||
|
|
if (t && s && e) {
|
||
|
|
var i = Math.min(t.toPx(), s / 2, e / 2);
|
||
|
|
this.ctx.globalAlpha = 0, this.ctx.fillStyle = "white", this.ctx.beginPath(), this.ctx.arc(-s / 2 + i, -e / 2 + i, i, 1 * Math.PI, 1.5 * Math.PI),
|
||
|
|
this.ctx.lineTo(s / 2 - i, -e / 2), this.ctx.arc(s / 2 - i, -e / 2 + i, i, 1.5 * Math.PI, 2 * Math.PI),
|
||
|
|
this.ctx.lineTo(s / 2, e / 2 - i), this.ctx.arc(s / 2 - i, e / 2 - i, i, 0, .5 * Math.PI),
|
||
|
|
this.ctx.lineTo(-s / 2 + i, e / 2), this.ctx.arc(-s / 2 + i, e / 2 - i, i, .5 * Math.PI, 1 * Math.PI),
|
||
|
|
this.ctx.closePath(), this.ctx.fill(), getApp().systemInfo && getApp().systemInfo.version <= "6.6.6" && "ios" === getApp().systemInfo.platform || this.ctx.clip(),
|
||
|
|
this.ctx.globalAlpha = 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_doBorder",
|
||
|
|
value: function(t, s, e) {
|
||
|
|
if (t.css) {
|
||
|
|
var i = t.css, c = i.borderRadius, h = i.borderWidth, r = i.borderColor;
|
||
|
|
if (h) {
|
||
|
|
var a;
|
||
|
|
this.ctx.save(), this._preProcess(t, !0), a = c ? Math.min(c.toPx(), s / 2, e / 2) : 0;
|
||
|
|
var o = h.toPx();
|
||
|
|
this.ctx.lineWidth = o, this.ctx.strokeStyle = r || "black", this.ctx.beginPath(),
|
||
|
|
this.ctx.arc(-s / 2 + a, -e / 2 + a, a + o / 2, 1 * Math.PI, 1.5 * Math.PI), this.ctx.lineTo(s / 2 - a, -e / 2 - o / 2),
|
||
|
|
this.ctx.arc(s / 2 - a, -e / 2 + a, a + o / 2, 1.5 * Math.PI, 2 * Math.PI), this.ctx.lineTo(s / 2 + o / 2, e / 2 - a),
|
||
|
|
this.ctx.arc(s / 2 - a, e / 2 - a, a + o / 2, 0, .5 * Math.PI), this.ctx.lineTo(-s / 2 + a, e / 2 + o / 2),
|
||
|
|
this.ctx.arc(-s / 2 + a, e / 2 - a, a + o / 2, .5 * Math.PI, 1 * Math.PI), this.ctx.closePath(),
|
||
|
|
this.ctx.stroke(), this.ctx.restore();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_preProcess",
|
||
|
|
value: function(t, s) {
|
||
|
|
var e, i, c;
|
||
|
|
switch (t.type) {
|
||
|
|
case "text":
|
||
|
|
var h = "bold" === t.css.fontWeight ? "bold" : "normal";
|
||
|
|
t.css.fontSize = t.css.fontSize ? t.css.fontSize : "20rpx", this.ctx.font = "normal ".concat(h, " ").concat(t.css.fontSize.toPx(), "px sans-serif");
|
||
|
|
var r = this.ctx.measureText(t.text).width;
|
||
|
|
e = t.css.width ? t.css.width.toPx() : r;
|
||
|
|
var a = Math.ceil(r / e), o = t.css.maxLines < a ? t.css.maxLines : a, l = t.css.lineHeight ? t.css.lineHeight.toPx() : t.css.fontSize.toPx();
|
||
|
|
i = l * o, c = {
|
||
|
|
lines: o,
|
||
|
|
lineHeight: l
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "image":
|
||
|
|
var n = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2;
|
||
|
|
e = t.css && t.css.width ? t.css.width.toPx() : Math.round(t.sWidth / n), i = t.css && t.css.height ? t.css.height.toPx() : Math.round(t.sHeight / n);
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
if (!t.css.width || !t.css.height) return void console.error("You should set width and height");
|
||
|
|
e = t.css.width.toPx(), i = t.css.height.toPx();
|
||
|
|
}
|
||
|
|
var x = t.css && t.css.right ? this.style.width - t.css.right.toPx(!0) : t.css && t.css.left ? t.css.left.toPx(!0) : 0, d = t.css && t.css.bottom ? this.style.height - i - t.css.bottom.toPx(!0) : t.css && t.css.top ? t.css.top.toPx(!0) : 0, u = t.css && t.css.rotate ? this._getAngle(t.css.rotate) : 0;
|
||
|
|
switch (t.css && t.css.align ? t.css.align : t.css && t.css.right ? "right" : "left") {
|
||
|
|
case "center":
|
||
|
|
this.ctx.translate(x, d + i / 2);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "right":
|
||
|
|
this.ctx.translate(x - e / 2, d + i / 2);
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
this.ctx.translate(x + e / 2, d + i / 2);
|
||
|
|
}
|
||
|
|
return this.ctx.rotate(u), !s && t.css && t.css.borderRadius && this._doClip(t.css.borderRadius, e, i),
|
||
|
|
{
|
||
|
|
width: e,
|
||
|
|
height: i,
|
||
|
|
x: x,
|
||
|
|
y: d,
|
||
|
|
extra: c
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_drawQRCode",
|
||
|
|
value: function(t) {
|
||
|
|
this.ctx.save();
|
||
|
|
var s = this._preProcess(t), e = s.width, i = s.height;
|
||
|
|
c.api.draw(t.content, this.ctx, -e / 2, -i / 2, e, i, t.css.background, t.css.color),
|
||
|
|
this.ctx.restore(), this._doBorder(t, e, i);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_drawAbsImage",
|
||
|
|
value: function(t) {
|
||
|
|
if (t.url) {
|
||
|
|
this.ctx.save();
|
||
|
|
var s, e, i = this._preProcess(t), c = i.width, h = i.height, r = 0, a = 0;
|
||
|
|
c > h ? (e = Math.round(t.sWidth / c * h), s = t.sWidth) : (s = Math.round(t.sHeight / h * c),
|
||
|
|
e = t.sHeight), t.sWidth > s && (r = Math.round((t.sWidth - s) / 2)), t.sHeight > e && (a = Math.round((t.sHeight - e) / 2)),
|
||
|
|
t.css && "scaleToFill" === t.css.mode ? this.ctx.drawImage(t.url, -c / 2, -h / 2, c, h) : this.ctx.drawImage(t.url, r, a, s, e, -c / 2, -h / 2, c, h),
|
||
|
|
this.ctx.restore(), this._doBorder(t, c, h);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_fillAbsText",
|
||
|
|
value: function(t) {
|
||
|
|
if (t.text) {
|
||
|
|
this.ctx.save();
|
||
|
|
var s = this._preProcess(t), e = s.width, i = s.height, c = s.extra;
|
||
|
|
this.ctx.fillStyle = t.css.color || "black";
|
||
|
|
for (var h = c.lines, r = c.lineHeight, a = Math.round(t.text.length / h), o = 0, l = 0, n = 0; n < h; ++n) {
|
||
|
|
l = a;
|
||
|
|
for (var x = t.text.substr(o, l), d = this.ctx.measureText(x).width; o + l <= t.text.length && (e - d > t.css.fontSize.toPx() || d > e); ) {
|
||
|
|
if (d < e) x = t.text.substr(o, ++l); else {
|
||
|
|
if (x.length <= 1) break;
|
||
|
|
x = t.text.substr(o, --l);
|
||
|
|
}
|
||
|
|
d = this.ctx.measureText(x).width;
|
||
|
|
}
|
||
|
|
if (o += x.length, n === h - 1 && o < t.text.length) {
|
||
|
|
for (;this.ctx.measureText("".concat(x, "...")).width > e && !(x.length <= 1); ) x = x.substring(0, x.length - 1);
|
||
|
|
x += "...", d = this.ctx.measureText(x).width;
|
||
|
|
}
|
||
|
|
this.ctx.setTextAlign(t.css.align ? t.css.align : "left");
|
||
|
|
var u = void 0;
|
||
|
|
switch (t.css.align) {
|
||
|
|
case "center":
|
||
|
|
u = 0;
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "right":
|
||
|
|
u = e / 2;
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
u = -e / 2;
|
||
|
|
}
|
||
|
|
var f = -i / 2 + (0 === n ? t.css.fontSize.toPx() : t.css.fontSize.toPx() + n * r);
|
||
|
|
"stroke" === t.css.textStyle ? this.ctx.strokeText(x, u, f, d) : this.ctx.fillText(x, u, f, d);
|
||
|
|
var g = t.css.fontSize.toPx();
|
||
|
|
t.css.textDecoration && (this.ctx.beginPath(), /\bunderline\b/.test(t.css.textDecoration) && (this.ctx.moveTo(u, f),
|
||
|
|
this.ctx.lineTo(u + d, f)), /\boverline\b/.test(t.css.textDecoration) && (this.ctx.moveTo(u, f - g),
|
||
|
|
this.ctx.lineTo(u + d, f - g)), /\bline-through\b/.test(t.css.textDecoration) && (this.ctx.moveTo(u, f - g / 3),
|
||
|
|
this.ctx.lineTo(u + d, f - g / 3)), this.ctx.closePath(), this.ctx.strokeStyle = t.css.color,
|
||
|
|
this.ctx.stroke());
|
||
|
|
}
|
||
|
|
this.ctx.restore(), this._doBorder(t, e, i);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_drawAbsRect",
|
||
|
|
value: function(t) {
|
||
|
|
this.ctx.save();
|
||
|
|
var s = this._preProcess(t), e = s.width, i = s.height;
|
||
|
|
this.ctx.fillStyle = t.css.color, this.ctx.fillRect(-e / 2, -i / 2, e, i), this.ctx.restore(),
|
||
|
|
this._doBorder(t, e, i);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "_getAngle",
|
||
|
|
value: function(t) {
|
||
|
|
return Number(t) * Math.PI / 180;
|
||
|
|
}
|
||
|
|
} ]), h;
|
||
|
|
}();
|
||
|
|
|
||
|
|
exports.default = h;
|