const QR = require('./qrcode.js');
const GD = require('./gradient.js');
require('./string-polyfill.js');
export const penCache = {
// 用于存储带 id 的 view 的 rect 信息
viewRect: {},
textLines: {},
};
export const clearPenCache = id => {
if (id) {
penCache.viewRect[id] = null;
penCache.textLines[id] = null;
} else {
penCache.viewRect = {};
penCache.textLines = {};
}
};
export default class Painter {
constructor(ctx, data) {
this.ctx = ctx;
this.data = data;
}
paint(callback) {
this.style = {
width: this.data.width.toPx(),
height: this.data.height.toPx(),
};
this._background();
for (const view of this.data.views) {
this._drawAbsolute(view);
}
this.ctx.draw(false, () => {
callback && callback();
});
}
_background() {
this.ctx.save();
const { width, height } = this.style;
const bg = this.data.background;
this.ctx.translate(width / 2, height / 2);
this._doClip(this.data.borderRadius, width, height);
if (!bg) {
// 如果未设置背景,则默认使用透明色
this.ctx.fillStyle = 'transparent';
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
} else if (bg.startsWith('#') || bg.startsWith('rgba') || bg.toLowerCase() === 'transparent') {
// 背景填充颜色
this.ctx.fillStyle = bg;
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
} else if (GD.api.isGradient(bg)) {
GD.api.doGradient(bg, width, height, this.ctx);
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
} else {
// 背景填充图片
this.ctx.drawImage(bg, -(width / 2), -(height / 2), width, height);
}
this.ctx.restore();
}
_drawAbsolute(view) {
if (!(view && view.type)) {
// 过滤无效 view
return;
}
// 证明 css 为数组形式,需要合并
if (view.css && view.css.length) {
/* eslint-disable no-param-reassign */
view.css = Object.assign(...view.css);
}
switch (view.type) {
case 'image':
this._drawAbsImage(view);
break;
case 'text':
this._fillAbsText(view);
break;
case 'inlineText':
this._fillAbsInlineText(view);
break;
case 'rect':
this._drawAbsRect(view);
break;
case 'qrcode':
this._drawQRCode(view);
break;
default:
break;
}
}
_border({ borderRadius = 0, width, height, borderWidth = 0, borderStyle = 'solid' }) {
let r1 = 0,
r2 = 0,
r3 = 0,
r4 = 0;
const minSize = Math.min(width, height);
if (borderRadius) {
const border = borderRadius.split(/\s+/);
if (border.length === 4) {
r1 = Math.min(border[0].toPx(false, minSize), width / 2, height / 2);
r2 = Math.min(border[1].toPx(false, minSize), width / 2, height / 2);
r3 = Math.min(border[2].toPx(false, minSize), width / 2, height / 2);
r4 = Math.min(border[3].toPx(false, minSize), width / 2, height / 2);
} else {
r1 = r2 = r3 = r4 = Math.min(borderRadius && borderRadius.toPx(false, minSize), width / 2, height / 2);
}
}
const lineWidth = borderWidth && borderWidth.toPx(false, minSize);
this.ctx.lineWidth = lineWidth;
if (borderStyle === 'dashed') {
this.ctx.setLineDash([(lineWidth * 4) / 3, (lineWidth * 4) / 3]);
// this.ctx.lineDashOffset = 2 * lineWidth
} else if (borderStyle === 'dotted') {
this.ctx.setLineDash([lineWidth, lineWidth]);
}
const notSolid = borderStyle !== 'solid';
this.ctx.beginPath();
notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2); // 顶边虚线规避重叠规则
r1 !== 0 && this.ctx.arc(-width / 2 + r1, -height / 2 + r1, r1 + lineWidth / 2, 1 * Math.PI, 1.5 * Math.PI); //左上角圆弧
this.ctx.lineTo(
r2 === 0 ? (notSolid ? width / 2 : width / 2 + lineWidth / 2) : width / 2 - r2,
-height / 2 - lineWidth / 2,
); // 顶边线
notSolid && r2 === 0 && this.ctx.moveTo(width / 2 + lineWidth / 2, -height / 2 - lineWidth); // 右边虚线规避重叠规则
r2 !== 0 && this.ctx.arc(width / 2 - r2, -height / 2 + r2, r2 + lineWidth / 2, 1.5 * Math.PI, 2 * Math.PI); // 右上角圆弧
this.ctx.lineTo(
width / 2 + lineWidth / 2,
r3 === 0 ? (notSolid ? height / 2 : height / 2 + lineWidth / 2) : height / 2 - r3,
); // 右边线
notSolid && r3 === 0 && this.ctx.moveTo(width / 2 + lineWidth, height / 2 + lineWidth / 2); // 底边虚线规避重叠规则
r3 !== 0 && this.ctx.arc(width / 2 - r3, height / 2 - r3, r3 + lineWidth / 2, 0, 0.5 * Math.PI); // 右下角圆弧
this.ctx.lineTo(
r4 === 0 ? (notSolid ? -width / 2 : -width / 2 - lineWidth / 2) : -width / 2 + r4,
height / 2 + lineWidth / 2,
); // 底边线
notSolid && r4 === 0 && this.ctx.moveTo(-width / 2 - lineWidth / 2, height / 2 + lineWidth); // 左边虚线规避重叠规则
r4 !== 0 && this.ctx.arc(-width / 2 + r4, height / 2 - r4, r4 + lineWidth / 2, 0.5 * Math.PI, 1 * Math.PI); // 左下角圆弧
this.ctx.lineTo(
-width / 2 - lineWidth / 2,
r1 === 0 ? (notSolid ? -height / 2 : -height / 2 - lineWidth / 2) : -height / 2 + r1,
); // 左边线
notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2); // 顶边虚线规避重叠规则
if (!notSolid) {
this.ctx.closePath();
}
}
/**
* 根据 borderRadius 进行裁减
*/
_doClip(borderRadius, width, height, borderStyle) {
if (borderRadius && width && height) {
// 防止在某些机型上周边有黑框现象,此处如果直接设置 fillStyle 为透明,在 Android 机型上会导致被裁减的图片也变为透明, iOS 和 IDE 上不会
// globalAlpha 在 1.9.90 起支持,低版本下无效,但把 fillStyle 设为了 white,相对默认的 black 要好点
this.ctx.globalAlpha = 0;
this.ctx.fillStyle = 'white';
this._border({
borderRadius,
width,
height,
borderStyle,
});
this.ctx.fill();
// 在 ios 的 6.6.6 版本上 clip 有 bug,禁掉此类型上的 clip,也就意味着,在此版本微信的 ios 设备下无法使用 border 属性
if (!(getApp().systemInfo && getApp().systemInfo.version <= '6.6.6' && getApp().systemInfo.platform === 'ios')) {
this.ctx.clip();
}
this.ctx.globalAlpha = 1;
}
}
/**
* 画边框
*/
_doBorder(view, width, height) {
if (!view.css) {
return;
}
const { borderRadius, borderWidth, borderColor, borderStyle } = view.css;
if (!borderWidth) {
return;
}
this.ctx.save();
this._preProcess(view, true);
this.ctx.strokeStyle = borderColor || 'black';
this._border({
borderRadius,
width,
height,
borderWidth,
borderStyle,
});
this.ctx.stroke();
this.ctx.restore();
}
_preProcess(view, notClip) {
let width = 0;
let height;
let extra;
const paddings = this._doPaddings(view);
switch (view.type) {
case 'inlineText': {
{
// 计算行数
let lines = 0;
// 文字总长度
let textLength = 0;
// 行高
let lineHeight = 0;
const textList = view.textList || [];
for (let i = 0; i < textList.length; i++) {
let subView = textList[i];
const fontWeight = subView.css.fontWeight || '400';
const textStyle = subView.css.textStyle || 'normal';
if (!subView.css.fontSize) {
subView.css.fontSize = '20rpx';
}
this.ctx.font = `${textStyle} ${fontWeight} ${subView.css.fontSize.toPx()}px "${subView.css.fontFamily || 'sans-serif'}"`;
textLength += this.ctx.measureText(subView.text).width;
l
没有合适的资源?快使用搜索试试~ 我知道了~
图书馆座位预约小程序源码(云开发).zip
共187个文件
js:46个
png:44个
json:40个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 1 下载量 30 浏览量
2023-10-08
21:37:28
上传
评论
收藏 2.3MB ZIP 举报
温馨提示
图书馆座位预约小程序源码(云开发).zip已获导师指导并通过的97分的高分期末大作业项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。功能有座位预约,扫码签到,图书检索,失物招领,监督举报,取消预约等功能。 图书馆座位预约小程序源码(云开发).zip已获导师指导并通过的97分的高分期末大作业项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。功能有座位预约,扫码签到,图书检索,失物招领,监督举报,取消预约等功能图书馆座位预约小程序源码(云开发).zip已获导师指导并通过的97分的高分期末大作业项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。功能有座位预约,扫码签到,图书检索,失物招领,监督举报,取消预约等功能图书馆座位预约小程序源码(云开发).zip已获导师指导并通过的97分的高分期末大作业项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。功能有座位预约,扫码签到,图书检索,失物招领,监督举报,取消预约等功能图书馆座位预约小程序源码(云开发).zip已获导师指导并通过的97分的高分期末大
资源推荐
资源详情
资源评论
收起资源包目录
图书馆座位预约小程序源码(云开发).zip (187个子文件)
.gitignore 159B
628caf4c1b07814538cc6e52dc12f2d.jpg 781KB
5d03ae5765a9c.jpg 44KB
gh_f73f75478be6_258.jpg 43KB
5d21f5a20be59.jpg 21KB
pen.js 30KB
qrcode.js 28KB
painter.js 26KB
qrcode.js 25KB
barcode.js 12KB
wx-canvas.js 11KB
downloader.js 10KB
sm.js 10KB
fbxx.js 6KB
fqjb.js 5KB
hdbm.js 4KB
gradient.js 4KB
zwyy.js 4KB
zwyd.js 3KB
zhuce.js 3KB
qxyy.js 3KB
index.js 2KB
sha1.js 2KB
wdyy.js 2KB
dkqd.js 2KB
grzx.js 2KB
wpxx.js 2KB
util.js 2KB
tsjs.js 2KB
dkjl.js 2KB
jdjb.js 1KB
swzl.js 1KB
swxq.js 1KB
news.js 1KB
calc.js 1KB
info.js 1KB
newsxq.js 1KB
tsxq.js 1KB
string-polyfill.js 1KB
gywm.js 1KB
app.js 896B
yjfk.js 841B
index.js 713B
times.js 619B
.eslintrc.js 587B
index.js 542B
index.js 481B
index.js 440B
index.js 341B
index.js 340B
envList.js 157B
package-lock.json 18KB
project.config.json 2KB
project.private.config.json 2KB
app.json 1KB
fqjb.json 470B
fbxx.json 470B
qxyy.json 413B
package.json 261B
package.json 257B
package.json 255B
package.json 254B
sitemap.json 195B
package.json 136B
index.json 87B
zwyy.json 79B
yjfk.json 71B
config.json 67B
grzx.json 64B
config.json 49B
config.json 49B
config.json 49B
painter.json 48B
index.json 48B
tsjs.json 46B
hdbm.json 46B
newsxq.json 46B
jdjb.json 46B
tsxq.json 46B
gywm.json 46B
news.json 46B
info.json 46B
swzl.json 46B
dkqd.json 45B
wdyy.json 27B
dkjl.json 27B
zwyd.json 27B
zhuce.json 27B
swxq.json 27B
sm.json 27B
wpxx.json 27B
5d044a1b5b7e4.png 348KB
5c9647d0c66d1.png 240KB
5d5bb0b712455.png 173KB
dk.png 104KB
5cff6f9da2f6c.png 101KB
屏幕截图 2023-02-03 165159.png 95KB
jl.png 84KB
ssjg.png 71KB
17972299.png 22KB
共 187 条
- 1
- 2
资源评论
- youyou06082023-12-26资源内容详尽,对我有使用价值,谢谢资源主的分享。
不安分的小女孩
- 粉丝: 9689
- 资源: 2293
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功