122 lines
2.7 KiB
JavaScript
122 lines
2.7 KiB
JavaScript
import {
|
|
pixelRatio,
|
|
sleep
|
|
} from './utils';
|
|
|
|
const UNI_CANVAS_CONTEXT_MAP = {
|
|
// #ifndef MP-WEIXIN
|
|
fillStyle: 'FillStyle',
|
|
fontSize: 'FontSize',
|
|
globalAlpha: 'GlobalAlpha',
|
|
opacity: 'GlobalAlpha',
|
|
lineCap: 'LineCap',
|
|
lineJoin: 'LineJoin',
|
|
lineWidth: 'LineWidth',
|
|
miterLimit: 'MiterLimit',
|
|
strokeStyle: 'StrokeStyle',
|
|
textAlign: 'TextAlign',
|
|
textBaseline: 'TextBaseline',
|
|
shadow: 'Shadow',
|
|
// #endif
|
|
// #ifdef MP-TOUTIAO || H5 || APP-PLUS
|
|
font: 'FontSize',
|
|
// #endif
|
|
};
|
|
|
|
function strLen(str) {
|
|
let len = 0;
|
|
for (let i = 0; i < str.length; i++) {
|
|
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
|
len++;
|
|
} else {
|
|
len += 2;
|
|
}
|
|
}
|
|
return len;
|
|
}
|
|
|
|
// 头条小程序目前仅支持 setFontSize
|
|
// f2 会将所有属性整合为 font 简写，从中提取 fontSize 支持
|
|
const fontSizeReg = /(\d*\.?\d*)px/;
|
|
const colorReg = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b/g;
|
|
export default (ctx) => {
|
|
// #ifdef H5 || APP-PLUS
|
|
ctx.uniTransform = ctx.transform
|
|
ctx.transform = (...agrs) => {
|
|
if (ctx.draw && agrs[6]) {
|
|
agrs[4] *= pixelRatio
|
|
agrs[5] *= pixelRatio
|
|
}
|
|
if (agrs.length > 6) {
|
|
agrs.pop()
|
|
}
|
|
ctx.uniTransform(...agrs)
|
|
}
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
ctx.canvasGetImageData = ctx.getImageData
|
|
ctx.getImageData = null
|
|
// #endif
|
|
if (!ctx.getImageData) {
|
|
ctx.getImageData = (...agrs) => {
|
|
const [x, y, width, height] = agrs
|
|
return new Promise(resolve => {
|
|
const parms = {
|
|
canvasId: ctx.id || ctx.canvasId,
|
|
x,
|
|
y,
|
|
width,
|
|
height,
|
|
success: res => {
|
|
resolve(res.data)
|
|
}
|
|
}
|
|
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
|
uni.canvasGetImageData(parms)
|
|
// #endif
|
|
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
|
ctx.canvasGetImageData(parms)
|
|
// #endif
|
|
})
|
|
}
|
|
}
|
|
// 钉钉小程序框架不支持 measureText 方法，用此方法 mock
|
|
if (!ctx.measureText) {
|
|
ctx.measureText = text => {
|
|
let fontSize = 12;
|
|
const font = ctx.__font;
|
|
if (font) {
|
|
fontSize = parseInt(font.split(' ')[3], 10);
|
|
}
|
|
fontSize /= 2;
|
|
return {
|
|
width: strLen(text) * fontSize
|
|
};
|
|
}
|
|
}
|
|
Object.keys(UNI_CANVAS_CONTEXT_MAP).forEach(key => {
|
|
Object.defineProperty(ctx, key, {
|
|
set(val) {
|
|
const name = `set${UNI_CANVAS_CONTEXT_MAP[key]}`;
|
|
if (!ctx[name]) {
|
|
return;
|
|
}
|
|
if (key === 'font' && fontSizeReg.test(val)) {
|
|
const match = fontSizeReg.exec(val);
|
|
ctx[name](match[1]);
|
|
return;
|
|
}
|
|
if (key === 'shadow' && Array.isArray(val)) {
|
|
ctx[name](...val);
|
|
return;
|
|
}
|
|
if(colorReg.test(val)) {
|
|
val = val.replace(colorReg, '#$1$1$2$2$3$3')
|
|
}
|
|
ctx[name](val);
|
|
}
|
|
});
|
|
});
|
|
return ctx
|
|
}
|