wxd / MShopWeApp

Browse Code »

Commit 5bfa8ba818fe83f4a82d6c2fa5ee80555137c914

Authored by taiyuan 2021-07-30 11:46:56 +0800

1 parent 5a685934

组合购

Inline Side-by-side

Showing 13 changed files with 4114 additions and 0 deletions

packageB/components/painter/lib/downloader.js 0 → 100644

View file @5bfa8ba

		1	+/**
		2	+ * LRU 文件存储，使用该 downloader 可以让下载的文件存储在本地，下次进入小程序后可以直接使用
		3	+ * 详细设计文档可查看 https://juejin.im/post/5b42d3ede51d4519277b6ce3
		4	+ */
		5	+const util = require('./util');
		6	+
		7	+const SAVED_FILES_KEY = 'savedFiles';
		8	+const KEY_TOTAL_SIZE = 'totalSize';
		9	+const KEY_PATH = 'path';
		10	+const KEY_TIME = 'time';
		11	+const KEY_SIZE = 'size';
		12	+
		13	+// 可存储总共为 6M，目前小程序可允许的最大本地存储为 10M
		14	+let MAX_SPACE_IN_B = 6 * 1024 * 1024;
		15	+let savedFiles = {};
		16	+
		17	+export default class Dowloader {
		18	+ constructor() {
		19	+ // app 如果设置了最大存储空间，则使用 app 中的
		20	+ if (getApp().PAINTER_MAX_LRU_SPACE) {
		21	+ MAX_SPACE_IN_B = getApp().PAINTER_MAX_LRU_SPACE;
		22	+ }
		23	+ wx.getStorage({
		24	+ key: SAVED_FILES_KEY,
		25	+ success: function (res) {
		26	+ if (res.data) {
		27	+ savedFiles = res.data;
		28	+ }
		29	+ },
		30	+ });
		31	+ }
		32	+
		33	+ /**
		34	+ * 下载文件，会用 lru 方式来缓存文件到本地
		35	+ * @param {String} url 文件的 url
		36	+ */
		37	+ download(url, lru) {
		38	+ return new Promise((resolve, reject) => {
		39	+ if (!(url && util.isValidUrl(url))) {
		40	+ resolve(url);
		41	+ return;
		42	+ }
		43	+ if (!lru) {
		44	+ // 无 lru 情况下直接判断临时文件是否存在，不存在重新下载
		45	+ wx.getFileInfo({
		46	+ filePath: url,
		47	+ success: () => {
		48	+ resolve(url);
		49	+ },
		50	+ fail: () => {
		51	+ downloadFile(url, lru).then((path) => {
		52	+ resolve(path);
		53	+ }, () => {
		54	+ reject();
		55	+ });
		56	+ },
		57	+ })
		58	+ return
		59	+ }
		60	+
		61	+ const file = getFile(url);
		62	+
		63	+ if (file) {
		64	+ // 检查文件是否正常，不正常需要重新下载
		65	+ wx.getSavedFileInfo({
		66	+ filePath: file[KEY_PATH],
		67	+ success: (res) => {
		68	+ resolve(file[KEY_PATH]);
		69	+ },
		70	+ fail: (error) => {
		71	+ console.error(`the file is broken, redownload it, ${JSON.stringify(error)}`);
		72	+ downloadFile(url, lru).then((path) => {
		73	+ resolve(path);
		74	+ }, () => {
		75	+ reject();
		76	+ });
		77	+ },
		78	+ });
		79	+ } else {
		80	+ downloadFile(url, lru).then((path) => {
		81	+ resolve(path);
		82	+ }, () => {
		83	+ reject();
		84	+ });
		85	+ }
		86	+ });
		87	+ }
		88	+}
		89	+
		90	+function downloadFile(url, lru) {
		91	+ return new Promise((resolve, reject) => {
		92	+ wx.downloadFile({
		93	+ url: url,
		94	+ success: function (res) {
		95	+ if (res.statusCode !== 200) {
		96	+ console.error(`downloadFile ${url} failed res.statusCode is not 200`);
		97	+ reject();
		98	+ return;
		99	+ }
		100	+ const {
		101	+ tempFilePath
		102	+ } = res;
		103	+ wx.getFileInfo({
		104	+ filePath: tempFilePath,
		105	+ success: (tmpRes) => {
		106	+ const newFileSize = tmpRes.size;
		107	+ lru ? doLru(newFileSize).then(() => {
		108	+ saveFile(url, newFileSize, tempFilePath).then((filePath) => {
		109	+ resolve(filePath);
		110	+ });
		111	+ }, () => {
		112	+ resolve(tempFilePath);
		113	+ }) : resolve(tempFilePath);
		114	+ },
		115	+ fail: (error) => {
		116	+ // 文件大小信息获取失败，则此文件也不要进行存储
		117	+ console.error(`getFileInfo ${res.tempFilePath} failed, ${JSON.stringify(error)}`);
		118	+ resolve(res.tempFilePath);
		119	+ },
		120	+ });
		121	+ },
		122	+ fail: function (error) {
		123	+ console.error(`downloadFile failed, ${JSON.stringify(error)} `);
		124	+ reject();
		125	+ },
		126	+ });
		127	+ });
		128	+}
		129	+
		130	+function saveFile(key, newFileSize, tempFilePath) {
		131	+ return new Promise((resolve, reject) => {
		132	+ wx.saveFile({
		133	+ tempFilePath: tempFilePath,
		134	+ success: (fileRes) => {
		135	+ const totalSize = savedFiles[KEY_TOTAL_SIZE] ? savedFiles[KEY_TOTAL_SIZE] : 0;
		136	+ savedFiles[key] = {};
		137	+ savedFiles[key][KEY_PATH] = fileRes.savedFilePath;
		138	+ savedFiles[key][KEY_TIME] = new Date().getTime();
		139	+ savedFiles[key][KEY_SIZE] = newFileSize;
		140	+ savedFiles['totalSize'] = newFileSize + totalSize;
		141	+ wx.setStorage({
		142	+ key: SAVED_FILES_KEY,
		143	+ data: savedFiles,
		144	+ });
		145	+ resolve(fileRes.savedFilePath);
		146	+ },
		147	+ fail: (error) => {
		148	+ console.error(`saveFile ${key} failed, then we delete all files, ${JSON.stringify(error)}`);
		149	+ // 由于 saveFile 成功后，res.tempFilePath 处的文件会被移除，所以在存储未成功时，我们还是继续使用临时文件
		150	+ resolve(tempFilePath);
		151	+ // 如果出现错误，就直接情况本地的所有文件，因为你不知道是不是因为哪次lru的某个文件未删除成功
		152	+ reset();
		153	+ },
		154	+ });
		155	+ });
		156	+}
		157	+
		158	+/**
		159	+ * 清空所有下载相关内容
		160	+ */
		161	+function reset() {
		162	+ wx.removeStorage({
		163	+ key: SAVED_FILES_KEY,
		164	+ success: () => {
		165	+ wx.getSavedFileList({
		166	+ success: (listRes) => {
		167	+ removeFiles(listRes.fileList);
		168	+ },
		169	+ fail: (getError) => {
		170	+ console.error(`getSavedFileList failed, ${JSON.stringify(getError)}`);
		171	+ },
		172	+ });
		173	+ },
		174	+ });
		175	+}
		176	+
		177	+function doLru(size) {
		178	+ if (size > MAX_SPACE_IN_B) {
		179	+ return Promise.reject()
		180	+ }
		181	+ return new Promise((resolve, reject) => {
		182	+ let totalSize = savedFiles[KEY_TOTAL_SIZE] ? savedFiles[KEY_TOTAL_SIZE] : 0;
		183	+
		184	+ if (size + totalSize <= MAX_SPACE_IN_B) {
		185	+ resolve();
		186	+ return;
		187	+ }
		188	+ // 如果加上新文件后大小超过最大限制，则进行 lru
		189	+ const pathsShouldDelete = [];
		190	+ // 按照最后一次的访问时间，从小到大排序
		191	+ const allFiles = JSON.parse(JSON.stringify(savedFiles));
		192	+ delete allFiles[KEY_TOTAL_SIZE];
		193	+ const sortedKeys = Object.keys(allFiles).sort((a, b) => {
		194	+ return allFiles[a][KEY_TIME] - allFiles[b][KEY_TIME];
		195	+ });
		196	+
		197	+ for (const sortedKey of sortedKeys) {
		198	+ totalSize -= savedFiles[sortedKey].size;
		199	+ pathsShouldDelete.push(savedFiles[sortedKey][KEY_PATH]);
		200	+ delete savedFiles[sortedKey];
		201	+ if (totalSize + size < MAX_SPACE_IN_B) {
		202	+ break;
		203	+ }
		204	+ }
		205	+
		206	+ savedFiles['totalSize'] = totalSize;
		207	+
		208	+ wx.setStorage({
		209	+ key: SAVED_FILES_KEY,
		210	+ data: savedFiles,
		211	+ success: () => {
		212	+ // 保证 storage 中不会存在不存在的文件数据
		213	+ if (pathsShouldDelete.length > 0) {
		214	+ removeFiles(pathsShouldDelete);
		215	+ }
		216	+ resolve();
		217	+ },
		218	+ fail: (error) => {
		219	+ console.error(`doLru setStorage failed, ${JSON.stringify(error)}`);
		220	+ reject();
		221	+ },
		222	+ });
		223	+ });
		224	+}
		225	+
		226	+function removeFiles(pathsShouldDelete) {
		227	+ for (const pathDel of pathsShouldDelete) {
		228	+ let delPath = pathDel;
		229	+ if (typeof pathDel === 'object') {
		230	+ delPath = pathDel.filePath;
		231	+ }
		232	+ wx.removeSavedFile({
		233	+ filePath: delPath,
		234	+ fail: (error) => {
		235	+ console.error(`removeSavedFile ${pathDel} failed, ${JSON.stringify(error)}`);
		236	+ },
		237	+ });
		238	+ }
		239	+}
		240	+
		241	+function getFile(key) {
		242	+ if (!savedFiles[key]) {
		243	+ return;
		244	+ }
		245	+ savedFiles[key]['time'] = new Date().getTime();
		246	+ wx.setStorage({
		247	+ key: SAVED_FILES_KEY,
		248	+ data: savedFiles,
		249	+ });
		250	+ return savedFiles[key];
		251	+}
0	\ No newline at end of file	252	\ No newline at end of file

packageB/components/painter/lib/gradient.js 0 → 100644

View file @5bfa8ba

		1	+/* eslint-disable */
		2	+// 当ctx传入当前文件，const grd = ctx.createCircularGradient() 和
		3	+// const grd = this.ctx.createLinearGradient() 无效，因此只能分开处理
		4	+// 先分析，在外部创建grd，再传入使用就可以
		5	+
		6	+!(function () {
		7	+
		8	+ var api = {
		9	+ isGradient: function(bg) {
		10	+ if (bg && (bg.startsWith('linear') \|\| bg.startsWith('radial'))) {
		11	+ return true;
		12	+ }
		13	+ return false;
		14	+ },
		15	+
		16	+ doGradient: function(bg, width, height, ctx) {
		17	+ if (bg.startsWith('linear')) {
		18	+ linearEffect(width, height, bg, ctx);
		19	+ } else if (bg.startsWith('radial')) {
		20	+ radialEffect(width, height, bg, ctx);
		21	+ }
		22	+ },
		23	+ }
		24	+
		25	+ function analizeGrad(string) {
		26	+ const colorPercents = string.substring(0, string.length - 1).split("%,");
		27	+ const colors = [];
		28	+ const percents = [];
		29	+ for (let colorPercent of colorPercents) {
		30	+ colors.push(colorPercent.substring(0, colorPercent.lastIndexOf(" ")).trim());
		31	+ percents.push(colorPercent.substring(colorPercent.lastIndexOf(" "), colorPercent.length) / 100);
		32	+ }
		33	+ return {colors: colors, percents: percents};
		34	+ }
		35	+
		36	+ function radialEffect(width, height, bg, ctx) {
		37	+ const colorPer = analizeGrad(bg.match(/radial-gradient$(.+)$/)[1]);
		38	+ const grd = ctx.createRadialGradient(0, 0, 0, 0, 0, width < height ? height / 2 : width / 2);
		39	+ for (let i = 0; i < colorPer.colors.length; i++) {
		40	+ grd.addColorStop(colorPer.percents[i], colorPer.colors[i]);
		41	+ }
		42	+ ctx.fillStyle = grd;
		43	+ //ctx.fillRect(-(width / 2), -(height / 2), width, height);
		44	+ }
		45	+
		46	+ function analizeLinear(bg, width, height) {
		47	+ const direction = bg.match(/([-]?\d{1,3})deg/);
		48	+ const dir = direction && direction[1] ? parseFloat(direction[1]) : 0;
		49	+ let coordinate;
		50	+ switch (dir) {
		51	+ case 0: coordinate = [0, -height / 2, 0, height / 2]; break;
		52	+ case 90: coordinate = [width / 2, 0, -width / 2, 0]; break;
		53	+ case -90: coordinate = [-width / 2, 0, width / 2, 0]; break;
		54	+ case 180: coordinate = [0, height / 2, 0, -height / 2]; break;
		55	+ case -180: coordinate = [0, -height / 2, 0, height / 2]; break;
		56	+ default:
		57	+ let x1 = 0;
		58	+ let y1 = 0;
		59	+ let x2 = 0;
		60	+ let y2 = 0;
		61	+ if (direction[1] > 0 && direction[1] < 90) {
		62	+ x1 = (width / 2) - ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
		63	+ y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
		64	+ x2 = -x1;
		65	+ y1 = -y2;
		66	+ } else if (direction[1] > -180 && direction[1] < -90) {
		67	+ x1 = -(width / 2) + ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
		68	+ y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
		69	+ x2 = -x1;
		70	+ y1 = -y2;
		71	+ } else if (direction[1] > 90 && direction[1] < 180) {
		72	+ x1 = (width / 2) + (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
		73	+ y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
		74	+ x2 = -x1;
		75	+ y1 = -y2;
		76	+ } else {
		77	+ x1 = -(width / 2) - (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
		78	+ y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
		79	+ x2 = -x1;
		80	+ y1 = -y2;
		81	+ }
		82	+ coordinate = [x1, y1, x2, y2];
		83	+ break;
		84	+ }
		85	+ return coordinate;
		86	+ }
		87	+
		88	+ function linearEffect(width, height, bg, ctx) {
		89	+ const param = analizeLinear(bg, width, height);
		90	+ const grd = ctx.createLinearGradient(param[0], param[1], param[2], param[3]);
		91	+ const content = bg.match(/linear-gradient$(.+)$/)[1];
		92	+ const colorPer = analizeGrad(content.substring(content.indexOf(',') + 1));
		93	+ for (let i = 0; i < colorPer.colors.length; i++) {
		94	+ grd.addColorStop(colorPer.percents[i], colorPer.colors[i]);
		95	+ }
		96	+ ctx.fillStyle = grd
		97	+ //ctx.fillRect(-(width / 2), -(height / 2), width, height);
		98	+ }
		99	+
		100	+ module.exports = { api }
		101	+
		102	+})();

packageB/components/painter/lib/pen.js 0 → 100644

View file @5bfa8ba

		1	+const QR = require('./qrcode.js');
		2	+const GD = require('./gradient.js');
		3	+
		4	+export default class Painter {
		5	+ constructor(ctx, data) {
		6	+ this.ctx = ctx;
		7	+ this.data = data;
		8	+ this.globalWidth = {};
		9	+ this.globalHeight = {};
		10	+ }
		11	+
		12	+ isMoving = false
		13	+ movingCache = {}
		14	+ paint(callback, isMoving, movingCache) {
		15	+ this.style = {
		16	+ width: this.data.width.toPx(),
		17	+ height: this.data.height.toPx(),
		18	+ };
		19	+ if (isMoving) {
		20	+ this.isMoving = true
		21	+ this.movingCache = movingCache
		22	+ }
		23	+ this._background();
		24	+ for (const view of this.data.views) {
		25	+ this._drawAbsolute(view);
		26	+ }
		27	+ this.ctx.draw(false, () => {
		28	+ callback && callback(this.callbackInfo);
		29	+ });
		30	+ }
		31	+
		32	+ _background() {
		33	+ this.ctx.save();
		34	+ const {
		35	+ width,
		36	+ height,
		37	+ } = this.style;
		38	+ const bg = this.data.background;
		39	+ this.ctx.translate(width / 2, height / 2);
		40	+
		41	+ this._doClip(this.data.borderRadius, width, height);
		42	+ if (!bg) {
		43	+ // 如果未设置背景，则默认使用透明色
		44	+ this.ctx.fillStyle = 'transparent';
		45	+ this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
		46	+ } else if (bg.startsWith('#') \|\| bg.startsWith('rgba') \|\| bg.toLowerCase() === 'transparent') {
		47	+ // 背景填充颜色
		48	+ this.ctx.fillStyle = bg;
		49	+ this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
		50	+ } else if (GD.api.isGradient(bg)) {
		51	+ GD.api.doGradient(bg, width, height, this.ctx);
		52	+ this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
		53	+ } else {
		54	+ // 背景填充图片
		55	+ this.ctx.drawImage(bg, -(width / 2), -(height / 2), width, height);
		56	+ }
		57	+ this.ctx.restore();
		58	+ }
		59	+
		60	+ _drawAbsolute(view) {
		61	+ if (!(view && view.type)) {
		62	+ // 过滤无效 view
		63	+ return
		64	+ }
		65	+ // 证明 css 为数组形式，需要合并
		66	+ if (view.css && view.css.length) {
		67	+ /* eslint-disable no-param-reassign */
		68	+ view.css = Object.assign(...view.css);
		69	+ }
		70	+ switch (view.type) {
		71	+ case 'image':
		72	+ this._drawAbsImage(view);
		73	+ break;
		74	+ case 'text':
		75	+ this._fillAbsText(view);
		76	+ break;
		77	+ case 'rect':
		78	+ this._drawAbsRect(view);
		79	+ break;
		80	+ case 'qrcode':
		81	+ this._drawQRCode(view);
		82	+ break;
		83	+ default:
		84	+ break;
		85	+ }
		86	+ }
		87	+
		88	+ _border({
		89	+ borderRadius = 0,
		90	+ width,
		91	+ height,
		92	+ borderWidth = 0,
		93	+ borderStyle = 'solid'
		94	+ }) {
		95	+ let r1 = 0,
		96	+ r2 = 0,
		97	+ r3 = 0,
		98	+ r4 = 0
		99	+ const minSize = Math.min(width, height);
		100	+ if (borderRadius) {
		101	+ const border = borderRadius.split(/\s+/)
		102	+ if (border.length === 4) {
		103	+ r1 = Math.min(border[0].toPx(false, minSize), width / 2, height / 2);
		104	+ r2 = Math.min(border[1].toPx(false, minSize), width / 2, height / 2);
		105	+ r3 = Math.min(border[2].toPx(false, minSize), width / 2, height / 2);
		106	+ r4 = Math.min(border[3].toPx(false, minSize), width / 2, height / 2);
		107	+ } else {
		108	+ r1 = r2 = r3 = r4 = Math.min(borderRadius && borderRadius.toPx(false, minSize), width / 2, height / 2);
		109	+ }
		110	+ }
		111	+ const lineWidth = borderWidth && borderWidth.toPx(false, minSize);
		112	+ this.ctx.lineWidth = lineWidth;
		113	+ if (borderStyle === 'dashed') {
		114	+ this.ctx.setLineDash([lineWidth * 4 / 3, lineWidth * 4 / 3]);
		115	+ // this.ctx.lineDashOffset = 2 * lineWidth
		116	+ } else if (borderStyle === 'dotted') {
		117	+ this.ctx.setLineDash([lineWidth, lineWidth]);
		118	+ }
		119	+ const notSolid = borderStyle !== 'solid'
		120	+ this.ctx.beginPath();
		121	+
		122	+ notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2) // 顶边虚线规避重叠规则
		123	+ r1 !== 0 && this.ctx.arc(-width / 2 + r1, -height / 2 + r1, r1 + lineWidth / 2, 1 * Math.PI, 1.5 * Math.PI); //左上角圆弧
		124	+ this.ctx.lineTo(r2 === 0 ? notSolid ? width / 2 : width / 2 + lineWidth / 2 : width / 2 - r2, -height / 2 - lineWidth / 2); // 顶边线
		125	+
		126	+ notSolid && r2 === 0 && this.ctx.moveTo(width / 2 + lineWidth / 2, -height / 2 - lineWidth) // 右边虚线规避重叠规则
		127	+ r2 !== 0 && this.ctx.arc(width / 2 - r2, -height / 2 + r2, r2 + lineWidth / 2, 1.5 * Math.PI, 2 * Math.PI); // 右上角圆弧
		128	+ this.ctx.lineTo(width / 2 + lineWidth / 2, r3 === 0 ? notSolid ? height / 2 : height / 2 + lineWidth / 2 : height / 2 - r3); // 右边线
		129	+
		130	+ notSolid && r3 === 0 && this.ctx.moveTo(width / 2 + lineWidth, height / 2 + lineWidth / 2) // 底边虚线规避重叠规则
		131	+ r3 !== 0 && this.ctx.arc(width / 2 - r3, height / 2 - r3, r3 + lineWidth / 2, 0, 0.5 * Math.PI); // 右下角圆弧
		132	+ this.ctx.lineTo(r4 === 0 ? notSolid ? -width / 2 : -width / 2 - lineWidth / 2 : -width / 2 + r4, height / 2 + lineWidth / 2); // 底边线
		133	+
		134	+ notSolid && r4 === 0 && this.ctx.moveTo(-width / 2 - lineWidth / 2, height / 2 + lineWidth) // 左边虚线规避重叠规则
		135	+ r4 !== 0 && this.ctx.arc(-width / 2 + r4, height / 2 - r4, r4 + lineWidth / 2, 0.5 * Math.PI, 1 * Math.PI); // 左下角圆弧
		136	+ this.ctx.lineTo(-width / 2 - lineWidth / 2, r1 === 0 ? notSolid ? -height / 2 : -height / 2 - lineWidth / 2 : -height / 2 + r1); // 左边线
		137	+ notSolid && r1 === 0 && this.ctx.moveTo(-width / 2 - lineWidth, -height / 2 - lineWidth / 2) // 顶边虚线规避重叠规则
		138	+
		139	+ if (!notSolid) {
		140	+ this.ctx.closePath();
		141	+ }
		142	+ }
		143	+
		144	+ /**
		145	+ * 根据 borderRadius 进行裁减
		146	+ */
		147	+ _doClip(borderRadius, width, height, borderStyle) {
		148	+ if (borderRadius && width && height) {
		149	+ // 防止在某些机型上周边有黑框现象，此处如果直接设置 fillStyle 为透明，在 Android 机型上会导致被裁减的图片也变为透明， iOS 和 IDE 上不会
		150	+ // globalAlpha 在 1.9.90 起支持，低版本下无效，但把 fillStyle 设为了 white，相对默认的 black 要好点
		151	+ this.ctx.globalAlpha = 0;
		152	+ this.ctx.fillStyle = 'white';
		153	+ this._border({
		154	+ borderRadius,
		155	+ width,
		156	+ height,
		157	+ borderStyle
		158	+ })
		159	+ this.ctx.fill();
		160	+ // 在 ios 的 6.6.6 版本上 clip 有 bug，禁掉此类型上的 clip，也就意味着，在此版本微信的 ios 设备下无法使用 border 属性
		161	+ if (!(getApp().systemInfo &&
		162	+ getApp().systemInfo.version <= '6.6.6' &&
		163	+ getApp().systemInfo.platform === 'ios')) {
		164	+ this.ctx.clip();
		165	+ }
		166	+ this.ctx.globalAlpha = 1;
		167	+ }
		168	+ }
		169	+
		170	+ /**
		171	+ * 画边框
		172	+ */
		173	+ _doBorder(view, width, height) {
		174	+ if (!view.css) {
		175	+ return;
		176	+ }
		177	+ const {
		178	+ borderRadius,
		179	+ borderWidth,
		180	+ borderColor,
		181	+ borderStyle
		182	+ } = view.css;
		183	+ if (!borderWidth) {
		184	+ return;
		185	+ }
		186	+ this.ctx.save();
		187	+ this._preProcess(view, true);
		188	+ this.ctx.strokeStyle = (borderColor \|\| 'black');
		189	+ this._border({
		190	+ borderRadius,
		191	+ width,
		192	+ height,
		193	+ borderWidth,
		194	+ borderStyle
		195	+ })
		196	+ this.ctx.stroke();
		197	+ this.ctx.restore();
		198	+ }
		199	+
		200	+ _preProcess(view, notClip) {
		201	+ let width = 0;
		202	+ let height;
		203	+ let extra;
		204	+ const paddings = this._doPaddings(view);
		205	+ switch (view.type) {
		206	+ case 'text': {
		207	+ const textArray = view.text.split('\n');
		208	+ // 处理多个连续的'\n'
		209	+ for (let i = 0; i < textArray.length; ++i) {
		210	+ if (textArray[i] === '') {
		211	+ textArray[i] = ' ';
		212	+ }
		213	+ }
		214	+ const fontWeight = view.css.fontWeight \|\| '400';
		215	+ const textStyle = view.css.textStyle \|\| 'normal';
		216	+ if (!view.css.fontSize) {
		217	+ view.css.fontSize = '20rpx';
		218	+ }
		219	+ this.ctx.font = `${textStyle} ${fontWeight} ${view.css.fontSize.toPx()}px "${view.css.fontFamily \|\| 'sans-serif'}"`;
		220	+ // 计算行数
		221	+ let lines = 0;
		222	+ const linesArray = [];
		223	+ for (let i = 0; i < textArray.length; ++i) {
		224	+ const textLength = this.ctx.measureText(textArray[i]).width;
		225	+ const minWidth = view.css.fontSize.toPx() + paddings[1] + paddings[3];
		226	+ let partWidth = view.css.width ? view.css.width.toPx(false, this.style.width) - paddings[1] - paddings[3] : textLength;
		227	+ if (partWidth < minWidth) {
		228	+ partWidth = minWidth;
		229	+ }
		230	+ const calLines = Math.ceil(textLength / partWidth);
		231	+ // 取最长的作为 width
		232	+ width = partWidth > width ? partWidth : width;
		233	+ lines += calLines;
		234	+ linesArray[i] = calLines;
		235	+ }
		236	+ lines = view.css.maxLines < lines ? view.css.maxLines : lines;
		237	+ const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx();
		238	+ height = lineHeight * lines;
		239	+ extra = {
		240	+ lines: lines,
		241	+ lineHeight: lineHeight,
		242	+ textArray: textArray,
		243	+ linesArray: linesArray,
		244	+ };
		245	+ break;
		246	+ }
		247	+ case 'image': {
		248	+ // image的长宽设置成auto的逻辑处理
		249	+ const ratio = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2;
		250	+ // 有css却未设置width或height，则默认为auto
		251	+ if (view.css) {
		252	+ if (!view.css.width) {
		253	+ view.css.width = 'auto';
		254	+ }
		255	+ if (!view.css.height) {
		256	+ view.css.height = 'auto';
		257	+ }
		258	+ }
		259	+ if (!view.css \|\| (view.css.width === 'auto' && view.css.height === 'auto')) {
		260	+ width = Math.round(view.sWidth / ratio);
		261	+ height = Math.round(view.sHeight / ratio);
		262	+ } else if (view.css.width === 'auto') {
		263	+ height = view.css.height.toPx(false, this.style.height);
		264	+ width = view.sWidth / view.sHeight * height;
		265	+ } else if (view.css.height === 'auto') {
		266	+ width = view.css.width.toPx(false, this.style.width);
		267	+ height = view.sHeight / view.sWidth * width;
		268	+ } else {
		269	+ width = view.css.width.toPx(false, this.style.width);
		270	+ height = view.css.height.toPx(false, this.style.height);
		271	+ }
		272	+ break;
		273	+ }
		274	+ default:
		275	+ if (!(view.css.width && view.css.height)) {
		276	+ console.error('You should set width and height');
		277	+ return;
		278	+ }
		279	+ width = view.css.width.toPx(false, this.style.width);
		280	+ height = view.css.height.toPx(false, this.style.height);
		281	+ break;
		282	+ }
		283	+ let x;
		284	+ if (view.css && view.css.right) {
		285	+ if (typeof view.css.right === 'string') {
		286	+ x = this.style.width - view.css.right.toPx(true, this.style.width);
		287	+ } else {
		288	+ // 可以用数组方式，把文字长度计算进去
		289	+ // [right, 文字id, 乘数（默认 1）]
		290	+ const rights = view.css.right;
		291	+ x = this.style.width - rights[0].toPx(true, this.style.width) - this.globalWidth[rights[1]] * (rights[2] \|\| 1);
		292	+ }
		293	+ } else if (view.css && view.css.left) {
		294	+ if (typeof view.css.left === 'string') {
		295	+ x = view.css.left.toPx(true, this.style.width);
		296	+ } else {
		297	+ const lefts = view.css.left;
		298	+ x = lefts[0].toPx(true, this.style.width) + this.globalWidth[lefts[1]] * (lefts[2] \|\| 1);
		299	+ }
		300	+ } else {
		301	+ x = 0;
		302	+ }
		303	+ //const y = view.css && view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css && view.css.top ? view.css.top.toPx(true) : 0);
		304	+ let y;
		305	+ if (view.css && view.css.bottom) {
		306	+ y = this.style.height - height - view.css.bottom.toPx(true, this.style.height);
		307	+ } else {
		308	+ if (view.css && view.css.top) {
		309	+ if (typeof view.css.top === 'string') {
		310	+ y = view.css.top.toPx(true, this.style.height);
		311	+ } else {
		312	+ const tops = view.css.top;
		313	+ y = tops[0].toPx(true, this.style.height) + this.globalHeight[tops[1]] * (tops[2] \|\| 1);
		314	+ }
		315	+ } else {
		316	+ y = 0
		317	+ }
		318	+ }
		319	+
		320	+ const angle = view.css && view.css.rotate ? this._getAngle(view.css.rotate) : 0;
		321	+ // 当设置了 right 时，默认 align 用 right，反之用 left
		322	+ const align = view.css && view.css.align ? view.css.align : (view.css && view.css.right ? 'right' : 'left');
		323	+ const verticalAlign = view.css && view.css.verticalAlign ? view.css.verticalAlign : 'top';
		324	+ // 记录绘制时的画布
		325	+ let xa = 0;
		326	+ switch (align) {
		327	+ case 'center':
		328	+ xa = x;
		329	+ break;
		330	+ case 'right':
		331	+ xa = x - width / 2;
		332	+ break;
		333	+ default:
		334	+ xa = x + width / 2;
		335	+ break;
		336	+ }
		337	+ let ya = 0;
		338	+ switch (verticalAlign) {
		339	+ case 'center':
		340	+ ya = y;
		341	+ break;
		342	+ case 'bottom':
		343	+ ya = y - height / 2;
		344	+ break;
		345	+ default:
		346	+ ya = y + height / 2;
		347	+ break;
		348	+ }
		349	+ this.ctx.translate(xa, ya);
		350	+ // 记录该 view 的有效点击区域
		351	+ // TODO ，旋转和裁剪的判断
		352	+ // 记录在真实画布上的左侧
		353	+ let left = x
		354	+ if (align === 'center') {
		355	+ left = x - width / 2
		356	+ } else if (align === 'right') {
		357	+ left = x - width
		358	+ }
		359	+ var top = y;
		360	+ if (verticalAlign === 'center') {
		361	+ top = y - height / 2;
		362	+ } else if (verticalAlign === 'bottom') {
		363	+ top = y - height
		364	+ }
		365	+ if (view.rect) {
		366	+ view.rect.left = left;
		367	+ view.rect.top = top;
		368	+ view.rect.right = left + width;
		369	+ view.rect.bottom = top + height;
		370	+ view.rect.x = view.css && view.css.right ? x - width : x;
		371	+ view.rect.y = y;
		372	+ } else {
		373	+ view.rect = {
		374	+ left: left,
		375	+ top: top,
		376	+ right: left + width,
		377	+ bottom: top + height,
		378	+ x: view.css && view.css.right ? x - width : x,
		379	+ y: y
		380	+ };
		381	+ }
		382	+
		383	+ view.rect.left = view.rect.left - paddings[3];
		384	+ view.rect.top = view.rect.top - paddings[0];
		385	+ view.rect.right = view.rect.right + paddings[1];
		386	+ view.rect.bottom = view.rect.bottom + paddings[2];
		387	+ if (view.type === 'text') {
		388	+ view.rect.minWidth = view.css.fontSize.toPx() + paddings[1] + paddings[3];
		389	+ }
		390	+
		391	+ this.ctx.rotate(angle);
		392	+ if (!notClip && view.css && view.css.borderRadius && view.type !== 'rect') {
		393	+ this._doClip(view.css.borderRadius, width, height, view.css.borderStyle);
		394	+ }
		395	+ this._doShadow(view);
		396	+ if (view.id) {
		397	+ this.globalWidth[view.id] = width;
		398	+ this.globalHeight[view.id] = height;
		399	+ }
		400	+ return {
		401	+ width: width,
		402	+ height: height,
		403	+ x: x,
		404	+ y: y,
		405	+ extra: extra,
		406	+ };
		407	+ }
		408	+
		409	+ _doPaddings(view) {
		410	+ const {
		411	+ padding,
		412	+ } = view.css ? view.css : {};
		413	+ let pd = [0, 0, 0, 0];
		414	+ if (padding) {
		415	+ const pdg = padding.split(/\s+/);
		416	+ if (pdg.length === 1) {
		417	+ const x = pdg[0].toPx();
		418	+ pd = [x, x, x, x];
		419	+ }
		420	+ if (pdg.length === 2) {
		421	+ const x = pdg[0].toPx();
		422	+ const y = pdg[1].toPx();
		423	+ pd = [x, y, x, y];
		424	+ }
		425	+ if (pdg.length === 3) {
		426	+ const x = pdg[0].toPx();
		427	+ const y = pdg[1].toPx();
		428	+ const z = pdg[2].toPx();
		429	+ pd = [x, y, z, y];
		430	+ }
		431	+ if (pdg.length === 4) {
		432	+ const x = pdg[0].toPx();
		433	+ const y = pdg[1].toPx();
		434	+ const z = pdg[2].toPx();
		435	+ const a = pdg[3].toPx();
		436	+ pd = [x, y, z, a];
		437	+ }
		438	+ }
		439	+ return pd;
		440	+ }
		441	+
		442	+ // 画文字的背景图片
		443	+ _doBackground(view) {
		444	+ this.ctx.save();
		445	+ const {
		446	+ width: rawWidth,
		447	+ height: rawHeight,
		448	+ } = this._preProcess(view, true);
		449	+
		450	+ const {
		451	+ background,
		452	+ } = view.css;
		453	+ let pd = this._doPaddings(view);
		454	+ const width = rawWidth + pd[1] + pd[3];
		455	+ const height = rawHeight + pd[0] + pd[2];
		456	+
		457	+ this._doClip(view.css.borderRadius, width, height, view.css.borderStyle)
		458	+ if (GD.api.isGradient(background)) {
		459	+ GD.api.doGradient(background, width, height, this.ctx);
		460	+ } else {
		461	+ this.ctx.fillStyle = background;
		462	+ }
		463	+ this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
		464	+
		465	+ this.ctx.restore();
		466	+ }
		467	+
		468	+ _drawQRCode(view) {
		469	+ this.ctx.save();
		470	+ const {
		471	+ width,
		472	+ height,
		473	+ } = this._preProcess(view);
		474	+ QR.api.draw(view.content, this.ctx, -width / 2, -height / 2, width, height, view.css.background, view.css.color);
		475	+ this.ctx.restore();
		476	+ this._doBorder(view, width, height);
		477	+ }
		478	+
		479	+ _drawAbsImage(view) {
		480	+ if (!view.url) {
		481	+ return;
		482	+ }
		483	+ this.ctx.save();
		484	+ const {
		485	+ width,
		486	+ height,
		487	+ } = this._preProcess(view);
		488	+ // 获得缩放到图片大小级别的裁减框
		489	+ let rWidth = view.sWidth;
		490	+ let rHeight = view.sHeight;
		491	+ let startX = 0;
		492	+ let startY = 0;
		493	+ // 绘画区域比例
		494	+ const cp = width / height;
		495	+ // 原图比例
		496	+ const op = view.sWidth / view.sHeight;
		497	+ if (cp >= op) {
		498	+ rHeight = rWidth / cp;
		499	+ startY = Math.round((view.sHeight - rHeight) / 2);
		500	+ } else {
		501	+ rWidth = rHeight * cp;
		502	+ startX = Math.round((view.sWidth - rWidth) / 2);
		503	+ }
		504	+ if (view.css && view.css.mode === 'scaleToFill') {
		505	+ this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height);
		506	+ } else {
		507	+ this.ctx.drawImage(view.url, startX, startY, rWidth, rHeight, -(width / 2), -(height / 2), width, height);
		508	+ view.rect.startX = startX / view.sWidth;
		509	+ view.rect.startY = startY / view.sHeight;
		510	+ view.rect.endX = (startX + rWidth) / view.sWidth;
		511	+ view.rect.endY = (startY + rHeight) / view.sHeight;
		512	+ }
		513	+ this.ctx.restore();
		514	+ this._doBorder(view, width, height);
		515	+ }
		516	+
		517	+ callbackInfo = {}
		518	+ _fillAbsText(view) {
		519	+ if (!view.text) {
		520	+ return;
		521	+ }
		522	+ if (view.css.background) {
		523	+ // 生成背景
		524	+ this._doBackground(view);
		525	+ }
		526	+ this.ctx.save();
		527	+ const {
		528	+ width,
		529	+ height,
		530	+ extra,
		531	+ } = this._preProcess(view, view.css.background && view.css.borderRadius);
		532	+ this.ctx.fillStyle = (view.css.color \|\| 'black');
		533	+ if (this.isMoving && JSON.stringify(this.movingCache) !== JSON.stringify({})) {
		534	+ this.globalWidth[view.id] = this.movingCache.globalWidth
		535	+ this.ctx.textAlign = view.css.textAlign ? view.css.textAlign : 'left';
		536	+ for (const i of this.movingCache.lineArray) {
		537	+ const {
		538	+ measuredWith,
		539	+ text,
		540	+ x,
		541	+ y,
		542	+ textDecoration
		543	+ } = i
		544	+ if (view.css.textStyle === 'stroke') {
		545	+ this.ctx.strokeText(text, x, y, measuredWith);
		546	+ } else {
		547	+ this.ctx.fillText(text, x, y, measuredWith);
		548	+ }
		549	+ if (textDecoration) {
		550	+ const fontSize = view.css.fontSize.toPx();
		551	+ this.ctx.lineWidth = fontSize / 13;
		552	+ this.ctx.beginPath();
		553	+ this.ctx.moveTo(...textDecoration.moveTo);
		554	+ this.ctx.lineTo(...textDecoration.lineTo);
		555	+ this.ctx.closePath();
		556	+ this.ctx.strokeStyle = view.css.color;
		557	+ this.ctx.stroke();
		558	+ }
		559	+ }
		560	+ } else {
		561	+ const {
		562	+ lines,
		563	+ lineHeight,
		564	+ textArray,
		565	+ linesArray,
		566	+ } = extra;
		567	+ // 如果设置了id，则保留 text 的长度
		568	+ if (view.id) {
		569	+ let textWidth = 0;
		570	+ for (let i = 0; i < textArray.length; ++i) {
		571	+ const _w = this.ctx.measureText(textArray[i]).width
		572	+ textWidth = _w > textWidth ? _w : textWidth;
		573	+ }
		574	+ this.globalWidth[view.id] = width ? (textWidth < width ? textWidth : width) : textWidth;
		575	+ if (!this.isMoving) {
		576	+ Object.assign(this.callbackInfo, {
		577	+ globalWidth: this.globalWidth[view.id]
		578	+ })
		579	+ }
		580	+ }
		581	+ let lineIndex = 0;
		582	+ for (let j = 0; j < textArray.length; ++j) {
		583	+ const preLineLength = Math.ceil(textArray[j].length / linesArray[j]);
		584	+ let start = 0;
		585	+ let alreadyCount = 0;
		586	+
		587	+ for (let i = 0; i < linesArray[j]; ++i) {
		588	+ // 绘制行数大于最大行数，则直接跳出循环
		589	+ if (lineIndex >= lines) {
		590	+ break;
		591	+ }
		592	+ alreadyCount = preLineLength;
		593	+ let text = textArray[j].substr(start, alreadyCount);
		594	+ let measuredWith = this.ctx.measureText(text).width;
		595	+ // 如果测量大小小于width一个字符的大小，则进行补齐，如果测量大小超出 width，则进行减除
		596	+ // 如果已经到文本末尾，也不要进行该循环
		597	+ while ((start + alreadyCount <= textArray[j].length) && (width - measuredWith > view.css.fontSize.toPx() \|\| measuredWith - width > view.css.fontSize.toPx())) {
		598	+ if (measuredWith < width) {
		599	+ text = textArray[j].substr(start, ++alreadyCount);
		600	+ } else {
		601	+ if (text.length <= 1) {
		602	+ // 如果只有一个字符时，直接跳出循环
		603	+ break;
		604	+ }
		605	+ text = textArray[j].substr(start, --alreadyCount);
		606	+ // break;
		607	+ }
		608	+ measuredWith = this.ctx.measureText(text).width;
		609	+ }
		610	+ start += text.length
		611	+ // 如果是最后一行了，发现还有未绘制完的内容，则加...
		612	+ if (lineIndex === lines - 1 && (j < textArray.length - 1 \|\| start < textArray[j].length)) {
		613	+ while (this.ctx.measureText(`${text}...`).width > width) {
		614	+ if (text.length <= 1) {
		615	+ // 如果只有一个字符时，直接跳出循环
		616	+ break;
		617	+ }
		618	+ text = text.substring(0, text.length - 1);
		619	+ }
		620	+ text += '...';
		621	+ measuredWith = this.ctx.measureText(text).width;
		622	+ }
		623	+ this.ctx.textAlign = view.css.textAlign ? view.css.textAlign : 'left';
		624	+ let x;
		625	+ let lineX;
		626	+ switch (view.css.textAlign) {
		627	+ case 'center':
		628	+ x = 0;
		629	+ lineX = x - measuredWith / 2;
		630	+ break;
		631	+ case 'right':
		632	+ x = (width / 2);
		633	+ lineX = x - measuredWith;
		634	+ break;
		635	+ default:
		636	+ x = -(width / 2);
		637	+ lineX = x;
		638	+ break;
		639	+ }
		640	+ const y = -(height / 2) + (lineIndex === 0 ? view.css.fontSize.toPx() : (view.css.fontSize.toPx() + lineIndex * lineHeight));
		641	+ lineIndex++;
		642	+ if (view.css.textStyle === 'stroke') {
		643	+ this.ctx.strokeText(text, x, y, measuredWith);
		644	+ } else {
		645	+ this.ctx.fillText(text, x, y, measuredWith);
		646	+ }
		647	+ const fontSize = view.css.fontSize.toPx();
		648	+ let textDecoration;
		649	+ if (view.css.textDecoration) {
		650	+ this.ctx.lineWidth = fontSize / 13;
		651	+ this.ctx.beginPath();
		652	+ if (/\bunderline\b/.test(view.css.textDecoration)) {
		653	+ this.ctx.moveTo(lineX, y);
		654	+ this.ctx.lineTo(lineX + measuredWith, y);
		655	+ textDecoration = {
		656	+ moveTo: [lineX, y],
		657	+ lineTo: [lineX + measuredWith, y]
		658	+ }
		659	+ }
		660	+ if (/\boverline\b/.test(view.css.textDecoration)) {
		661	+ this.ctx.moveTo(lineX, y - fontSize);
		662	+ this.ctx.lineTo(lineX + measuredWith, y - fontSize);
		663	+ textDecoration = {
		664	+ moveTo: [lineX, y - fontSize],
		665	+ lineTo: [lineX + measuredWith, y - fontSize]
		666	+ }
		667	+ }
		668	+ if (/\bline-through\b/.test(view.css.textDecoration)) {
		669	+ this.ctx.moveTo(lineX, y - fontSize / 3);
		670	+ this.ctx.lineTo(lineX + measuredWith, y - fontSize / 3);
		671	+ textDecoration = {
		672	+ moveTo: [lineX, y - fontSize / 3],
		673	+ lineTo: [lineX + measuredWith, y - fontSize / 3]
		674	+ }
		675	+ }
		676	+ this.ctx.closePath();
		677	+ this.ctx.strokeStyle = view.css.color;
		678	+ this.ctx.stroke();
		679	+ }
		680	+ if (!this.isMoving) {
		681	+ this.callbackInfo.lineArray ? this.callbackInfo.lineArray.push({
		682	+ text,
		683	+ x,
		684	+ y,
		685	+ measuredWith,
		686	+ textDecoration
		687	+ }) : this.callbackInfo.lineArray = [{
		688	+ text,
		689	+ x,
		690	+ y,
		691	+ measuredWith,
		692	+ textDecoration
		693	+ }]
		694	+ }
		695	+ }
		696	+ }
		697	+ }
		698	+ this.ctx.restore();
		699	+ this._doBorder(view, width, height);
		700	+ }
		701	+
		702	+ _drawAbsRect(view) {
		703	+ this.ctx.save();
		704	+ const {
		705	+ width,
		706	+ height,
		707	+ } = this._preProcess(view);
		708	+ if (GD.api.isGradient(view.css.color)) {
		709	+ GD.api.doGradient(view.css.color, width, height, this.ctx);
		710	+ } else {
		711	+ this.ctx.fillStyle = view.css.color;
		712	+ }
		713	+ const {
		714	+ borderRadius,
		715	+ borderStyle,
		716	+ borderWidth
		717	+ } = view.css
		718	+ this._border({
		719	+ borderRadius,
		720	+ width,
		721	+ height,
		722	+ borderWidth,
		723	+ borderStyle
		724	+ })
		725	+ this.ctx.fill();
		726	+ this.ctx.restore();
		727	+ this._doBorder(view, width, height);
		728	+ }
		729	+
		730	+ // shadow 支持 (x, y, blur, color), 不支持 spread
		731	+ // shadow:0px 0px 10px rgba(0,0,0,0.1);
		732	+ _doShadow(view) {
		733	+ if (!view.css \|\| !view.css.shadow) {
		734	+ return;
		735	+ }
		736	+ const box = view.css.shadow.replace(/,\s+/g, ',').split(/\s+/);
		737	+ if (box.length > 4) {
		738	+ console.error('shadow don\'t spread option');
		739	+ return;
		740	+ }
		741	+ this.ctx.shadowOffsetX = parseInt(box[0], 10);
		742	+ this.ctx.shadowOffsetY = parseInt(box[1], 10);
		743	+ this.ctx.shadowBlur = parseInt(box[2], 10);
		744	+ this.ctx.shadowColor = box[3];
		745	+ }
		746	+
		747	+ _getAngle(angle) {
		748	+ return Number(angle) * Math.PI / 180;
		749	+ }
		750	+}

packageB/components/painter/lib/qrcode.js 0 → 100644

View file @5bfa8ba

		1	+/* eslint-disable */
		2	+!(function () {
		3	+
		4	+ // alignment pattern
		5	+ var adelta = [
		6	+ 0, 11, 15, 19, 23, 27, 31,
		7	+ 16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24,
		8	+ 26, 26, 28, 28, 24, 24, 26, 26, 26, 28, 28, 24, 26, 26, 26, 28, 28
		9	+ ];
		10	+
		11	+ // version block
		12	+ var vpat = [
		13	+ 0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d,
		14	+ 0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9,
		15	+ 0x7ec, 0xec4, 0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75,
		16	+ 0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64,
		17	+ 0x541, 0xc69
		18	+ ];
		19	+
		20	+ // final format bits with mask: level << 3 \| mask
		21	+ var fmtword = [
		22	+ 0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976, //L
		23	+ 0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0, //M
		24	+ 0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed, //Q
		25	+ 0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b //H
		26	+ ];
		27	+
		28	+ // 4 per version: number of blocks 1,2; data width; ecc width
		29	+ var eccblocks = [
		30	+ 1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17,
		31	+ 1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28,
		32	+ 1, 0, 55, 15, 1, 0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22,
		33	+ 1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16,
		34	+ 1, 0, 108, 26, 2, 0, 43, 24, 2, 2, 15, 18, 2, 2, 11, 22,
		35	+ 2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28,
		36	+ 2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4, 1, 13, 26,
		37	+ 2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26,
		38	+ 2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24,
		39	+ 2, 2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28,
		40	+ 4, 0, 81, 20, 1, 4, 50, 30, 4, 4, 22, 28, 3, 8, 12, 24,
		41	+ 2, 2, 92, 24, 6, 2, 36, 22, 4, 6, 20, 26, 7, 4, 14, 28,
		42	+ 4, 0, 107, 26, 8, 1, 37, 22, 8, 4, 20, 24, 12, 4, 11, 22,
		43	+ 3, 1, 115, 30, 4, 5, 40, 24, 11, 5, 16, 20, 11, 5, 12, 24,
		44	+ 5, 1, 87, 22, 5, 5, 41, 24, 5, 7, 24, 30, 11, 7, 12, 24,
		45	+ 5, 1, 98, 24, 7, 3, 45, 28, 15, 2, 19, 24, 3, 13, 15, 30,
		46	+ 1, 5, 107, 28, 10, 1, 46, 28, 1, 15, 22, 28, 2, 17, 14, 28,
		47	+ 5, 1, 120, 30, 9, 4, 43, 26, 17, 1, 22, 28, 2, 19, 14, 28,
		48	+ 3, 4, 113, 28, 3, 11, 44, 26, 17, 4, 21, 26, 9, 16, 13, 26,
		49	+ 3, 5, 107, 28, 3, 13, 41, 26, 15, 5, 24, 30, 15, 10, 15, 28,
		50	+ 4, 4, 116, 28, 17, 0, 42, 26, 17, 6, 22, 28, 19, 6, 16, 30,
		51	+ 2, 7, 111, 28, 17, 0, 46, 28, 7, 16, 24, 30, 34, 0, 13, 24,
		52	+ 4, 5, 121, 30, 4, 14, 47, 28, 11, 14, 24, 30, 16, 14, 15, 30,
		53	+ 6, 4, 117, 30, 6, 14, 45, 28, 11, 16, 24, 30, 30, 2, 16, 30,
		54	+ 8, 4, 106, 26, 8, 13, 47, 28, 7, 22, 24, 30, 22, 13, 15, 30,
		55	+ 10, 2, 114, 28, 19, 4, 46, 28, 28, 6, 22, 28, 33, 4, 16, 30,
		56	+ 8, 4, 122, 30, 22, 3, 45, 28, 8, 26, 23, 30, 12, 28, 15, 30,
		57	+ 3, 10, 117, 30, 3, 23, 45, 28, 4, 31, 24, 30, 11, 31, 15, 30,
		58	+ 7, 7, 116, 30, 21, 7, 45, 28, 1, 37, 23, 30, 19, 26, 15, 30,
		59	+ 5, 10, 115, 30, 19, 10, 47, 28, 15, 25, 24, 30, 23, 25, 15, 30,
		60	+ 13, 3, 115, 30, 2, 29, 46, 28, 42, 1, 24, 30, 23, 28, 15, 30,
		61	+ 17, 0, 115, 30, 10, 23, 46, 28, 10, 35, 24, 30, 19, 35, 15, 30,
		62	+ 17, 1, 115, 30, 14, 21, 46, 28, 29, 19, 24, 30, 11, 46, 15, 30,
		63	+ 13, 6, 115, 30, 14, 23, 46, 28, 44, 7, 24, 30, 59, 1, 16, 30,
		64	+ 12, 7, 121, 30, 12, 26, 47, 28, 39, 14, 24, 30, 22, 41, 15, 30,
		65	+ 6, 14, 121, 30, 6, 34, 47, 28, 46, 10, 24, 30, 2, 64, 15, 30,
		66	+ 17, 4, 122, 30, 29, 14, 46, 28, 49, 10, 24, 30, 24, 46, 15, 30,
		67	+ 4, 18, 122, 30, 13, 32, 46, 28, 48, 14, 24, 30, 42, 32, 15, 30,
		68	+ 20, 4, 117, 30, 40, 7, 47, 28, 43, 22, 24, 30, 10, 67, 15, 30,
		69	+ 19, 6, 118, 30, 18, 31, 47, 28, 34, 34, 24, 30, 20, 61, 15, 30
		70	+ ];
		71	+
		72	+ // Galois field log table
		73	+ var glog = [
		74	+ 0xff, 0x00, 0x01, 0x19, 0x02, 0x32, 0x1a, 0xc6, 0x03, 0xdf, 0x33, 0xee, 0x1b, 0x68, 0xc7, 0x4b,
		75	+ 0x04, 0x64, 0xe0, 0x0e, 0x34, 0x8d, 0xef, 0x81, 0x1c, 0xc1, 0x69, 0xf8, 0xc8, 0x08, 0x4c, 0x71,
		76	+ 0x05, 0x8a, 0x65, 0x2f, 0xe1, 0x24, 0x0f, 0x21, 0x35, 0x93, 0x8e, 0xda, 0xf0, 0x12, 0x82, 0x45,
		77	+ 0x1d, 0xb5, 0xc2, 0x7d, 0x6a, 0x27, 0xf9, 0xb9, 0xc9, 0x9a, 0x09, 0x78, 0x4d, 0xe4, 0x72, 0xa6,
		78	+ 0x06, 0xbf, 0x8b, 0x62, 0x66, 0xdd, 0x30, 0xfd, 0xe2, 0x98, 0x25, 0xb3, 0x10, 0x91, 0x22, 0x88,
		79	+ 0x36, 0xd0, 0x94, 0xce, 0x8f, 0x96, 0xdb, 0xbd, 0xf1, 0xd2, 0x13, 0x5c, 0x83, 0x38, 0x46, 0x40,
		80	+ 0x1e, 0x42, 0xb6, 0xa3, 0xc3, 0x48, 0x7e, 0x6e, 0x6b, 0x3a, 0x28, 0x54, 0xfa, 0x85, 0xba, 0x3d,
		81	+ 0xca, 0x5e, 0x9b, 0x9f, 0x0a, 0x15, 0x79, 0x2b, 0x4e, 0xd4, 0xe5, 0xac, 0x73, 0xf3, 0xa7, 0x57,
		82	+ 0x07, 0x70, 0xc0, 0xf7, 0x8c, 0x80, 0x63, 0x0d, 0x67, 0x4a, 0xde, 0xed, 0x31, 0xc5, 0xfe, 0x18,
		83	+ 0xe3, 0xa5, 0x99, 0x77, 0x26, 0xb8, 0xb4, 0x7c, 0x11, 0x44, 0x92, 0xd9, 0x23, 0x20, 0x89, 0x2e,
		84	+ 0x37, 0x3f, 0xd1, 0x5b, 0x95, 0xbc, 0xcf, 0xcd, 0x90, 0x87, 0x97, 0xb2, 0xdc, 0xfc, 0xbe, 0x61,
		85	+ 0xf2, 0x56, 0xd3, 0xab, 0x14, 0x2a, 0x5d, 0x9e, 0x84, 0x3c, 0x39, 0x53, 0x47, 0x6d, 0x41, 0xa2,
		86	+ 0x1f, 0x2d, 0x43, 0xd8, 0xb7, 0x7b, 0xa4, 0x76, 0xc4, 0x17, 0x49, 0xec, 0x7f, 0x0c, 0x6f, 0xf6,
		87	+ 0x6c, 0xa1, 0x3b, 0x52, 0x29, 0x9d, 0x55, 0xaa, 0xfb, 0x60, 0x86, 0xb1, 0xbb, 0xcc, 0x3e, 0x5a,
		88	+ 0xcb, 0x59, 0x5f, 0xb0, 0x9c, 0xa9, 0xa0, 0x51, 0x0b, 0xf5, 0x16, 0xeb, 0x7a, 0x75, 0x2c, 0xd7,
		89	+ 0x4f, 0xae, 0xd5, 0xe9, 0xe6, 0xe7, 0xad, 0xe8, 0x74, 0xd6, 0xf4, 0xea, 0xa8, 0x50, 0x58, 0xaf
		90	+ ];
		91	+
		92	+ // Galios field exponent table
		93	+ var gexp = [
		94	+ 0x01, 0x02, 0x04, 0x08, 0x10, 0x20, 0x40, 0x80, 0x1d, 0x3a, 0x74, 0xe8, 0xcd, 0x87, 0x13, 0x26,
		95	+ 0x4c, 0x98, 0x2d, 0x5a, 0xb4, 0x75, 0xea, 0xc9, 0x8f, 0x03, 0x06, 0x0c, 0x18, 0x30, 0x60, 0xc0,
		96	+ 0x9d, 0x27, 0x4e, 0x9c, 0x25, 0x4a, 0x94, 0x35, 0x6a, 0xd4, 0xb5, 0x77, 0xee, 0xc1, 0x9f, 0x23,
		97	+ 0x46, 0x8c, 0x05, 0x0a, 0x14, 0x28, 0x50, 0xa0, 0x5d, 0xba, 0x69, 0xd2, 0xb9, 0x6f, 0xde, 0xa1,
		98	+ 0x5f, 0xbe, 0x61, 0xc2, 0x99, 0x2f, 0x5e, 0xbc, 0x65, 0xca, 0x89, 0x0f, 0x1e, 0x3c, 0x78, 0xf0,
		99	+ 0xfd, 0xe7, 0xd3, 0xbb, 0x6b, 0xd6, 0xb1, 0x7f, 0xfe, 0xe1, 0xdf, 0xa3, 0x5b, 0xb6, 0x71, 0xe2,
		100	+ 0xd9, 0xaf, 0x43, 0x86, 0x11, 0x22, 0x44, 0x88, 0x0d, 0x1a, 0x34, 0x68, 0xd0, 0xbd, 0x67, 0xce,
		101	+ 0x81, 0x1f, 0x3e, 0x7c, 0xf8, 0xed, 0xc7, 0x93, 0x3b, 0x76, 0xec, 0xc5, 0x97, 0x33, 0x66, 0xcc,
		102	+ 0x85, 0x17, 0x2e, 0x5c, 0xb8, 0x6d, 0xda, 0xa9, 0x4f, 0x9e, 0x21, 0x42, 0x84, 0x15, 0x2a, 0x54,
		103	+ 0xa8, 0x4d, 0x9a, 0x29, 0x52, 0xa4, 0x55, 0xaa, 0x49, 0x92, 0x39, 0x72, 0xe4, 0xd5, 0xb7, 0x73,
		104	+ 0xe6, 0xd1, 0xbf, 0x63, 0xc6, 0x91, 0x3f, 0x7e, 0xfc, 0xe5, 0xd7, 0xb3, 0x7b, 0xf6, 0xf1, 0xff,
		105	+ 0xe3, 0xdb, 0xab, 0x4b, 0x96, 0x31, 0x62, 0xc4, 0x95, 0x37, 0x6e, 0xdc, 0xa5, 0x57, 0xae, 0x41,
		106	+ 0x82, 0x19, 0x32, 0x64, 0xc8, 0x8d, 0x07, 0x0e, 0x1c, 0x38, 0x70, 0xe0, 0xdd, 0xa7, 0x53, 0xa6,
		107	+ 0x51, 0xa2, 0x59, 0xb2, 0x79, 0xf2, 0xf9, 0xef, 0xc3, 0x9b, 0x2b, 0x56, 0xac, 0x45, 0x8a, 0x09,
		108	+ 0x12, 0x24, 0x48, 0x90, 0x3d, 0x7a, 0xf4, 0xf5, 0xf7, 0xf3, 0xfb, 0xeb, 0xcb, 0x8b, 0x0b, 0x16,
		109	+ 0x2c, 0x58, 0xb0, 0x7d, 0xfa, 0xe9, 0xcf, 0x83, 0x1b, 0x36, 0x6c, 0xd8, 0xad, 0x47, 0x8e, 0x00
		110	+ ];
		111	+
		112	+ // Working buffers:
		113	+ // data input and ecc append, image working buffer, fixed part of image, run lengths for badness
		114	+ var strinbuf = [], eccbuf = [], qrframe = [], framask = [], rlens = [];
		115	+ // Control values - width is based on version, last 4 are from table.
		116	+ var version, width, neccblk1, neccblk2, datablkw, eccblkwid;
		117	+ var ecclevel = 2;
		118	+ // set bit to indicate cell in qrframe is immutable. symmetric around diagonal
		119	+ function setmask(x, y) {
		120	+ var bt;
		121	+ if (x > y) {
		122	+ bt = x;
		123	+ x = y;
		124	+ y = bt;
		125	+ }
		126	+ // y*y = 1+3+5...
		127	+ bt = y;
		128	+ bt *= y;
		129	+ bt += y;
		130	+ bt >>= 1;
		131	+ bt += x;
		132	+ framask[bt] = 1;
		133	+ }
		134	+
		135	+ // enter alignment pattern - black to qrframe, white to mask (later black frame merged to mask)
		136	+ function putalign(x, y) {
		137	+ var j;
		138	+
		139	+ qrframe[x + width * y] = 1;
		140	+ for (j = -2; j < 2; j++) {
		141	+ qrframe[(x + j) + width * (y - 2)] = 1;
		142	+ qrframe[(x - 2) + width * (y + j + 1)] = 1;
		143	+ qrframe[(x + 2) + width * (y + j)] = 1;
		144	+ qrframe[(x + j + 1) + width * (y + 2)] = 1;
		145	+ }
		146	+ for (j = 0; j < 2; j++) {
		147	+ setmask(x - 1, y + j);
		148	+ setmask(x + 1, y - j);
		149	+ setmask(x - j, y - 1);
		150	+ setmask(x + j, y + 1);
		151	+ }
		152	+ }
		153	+
		154	+ //========================================================================
		155	+ // Reed Solomon error correction
		156	+ // exponentiation mod N
		157	+ function modnn(x) {
		158	+ while (x >= 255) {
		159	+ x -= 255;
		160	+ x = (x >> 8) + (x & 255);
		161	+ }
		162	+ return x;
		163	+ }
		164	+
		165	+ var genpoly = [];
		166	+
		167	+ // Calculate and append ECC data to data block. Block is in strinbuf, indexes to buffers given.
		168	+ function appendrs(data, dlen, ecbuf, eclen) {
		169	+ var i, j, fb;
		170	+
		171	+ for (i = 0; i < eclen; i++)
		172	+ strinbuf[ecbuf + i] = 0;
		173	+ for (i = 0; i < dlen; i++) {
		174	+ fb = glog[strinbuf[data + i] ^ strinbuf[ecbuf]];
		175	+ if (fb != 255) /* fb term is non-zero */
		176	+ for (j = 1; j < eclen; j++)
		177	+ strinbuf[ecbuf + j - 1] = strinbuf[ecbuf + j] ^ gexp[modnn(fb + genpoly[eclen - j])];
		178	+ else
		179	+ for (j = ecbuf; j < ecbuf + eclen; j++)
		180	+ strinbuf[j] = strinbuf[j + 1];
		181	+ strinbuf[ecbuf + eclen - 1] = fb == 255 ? 0 : gexp[modnn(fb + genpoly[0])];
		182	+ }
		183	+ }
		184	+
		185	+ //========================================================================
		186	+ // Frame data insert following the path rules
		187	+
		188	+ // check mask - since symmetrical use half.
		189	+ function ismasked(x, y) {
		190	+ var bt;
		191	+ if (x > y) {
		192	+ bt = x;
		193	+ x = y;
		194	+ y = bt;
		195	+ }
		196	+ bt = y;
		197	+ bt += y * y;
		198	+ bt >>= 1;
		199	+ bt += x;
		200	+ return framask[bt];
		201	+ }
		202	+
		203	+ //========================================================================
		204	+ // Apply the selected mask out of the 8.
		205	+ function applymask(m) {
		206	+ var x, y, r3x, r3y;
		207	+
		208	+ switch (m) {
		209	+ case 0:
		210	+ for (y = 0; y < width; y++)
		211	+ for (x = 0; x < width; x++)
		212	+ if (!((x + y) & 1) && !ismasked(x, y))
		213	+ qrframe[x + y * width] ^= 1;
		214	+ break;
		215	+ case 1:
		216	+ for (y = 0; y < width; y++)
		217	+ for (x = 0; x < width; x++)
		218	+ if (!(y & 1) && !ismasked(x, y))
		219	+ qrframe[x + y * width] ^= 1;
		220	+ break;
		221	+ case 2:
		222	+ for (y = 0; y < width; y++)
		223	+ for (r3x = 0, x = 0; x < width; x++ , r3x++) {
		224	+ if (r3x == 3)
		225	+ r3x = 0;
		226	+ if (!r3x && !ismasked(x, y))
		227	+ qrframe[x + y * width] ^= 1;
		228	+ }
		229	+ break;
		230	+ case 3:
		231	+ for (r3y = 0, y = 0; y < width; y++ , r3y++) {
		232	+ if (r3y == 3)
		233	+ r3y = 0;
		234	+ for (r3x = r3y, x = 0; x < width; x++ , r3x++) {
		235	+ if (r3x == 3)
		236	+ r3x = 0;
		237	+ if (!r3x && !ismasked(x, y))
		238	+ qrframe[x + y * width] ^= 1;
		239	+ }
		240	+ }
		241	+ break;
		242	+ case 4:
		243	+ for (y = 0; y < width; y++)
		244	+ for (r3x = 0, r3y = ((y >> 1) & 1), x = 0; x < width; x++ , r3x++) {
		245	+ if (r3x == 3) {
		246	+ r3x = 0;
		247	+ r3y = !r3y;
		248	+ }
		249	+ if (!r3y && !ismasked(x, y))
		250	+ qrframe[x + y * width] ^= 1;
		251	+ }
		252	+ break;
		253	+ case 5:
		254	+ for (r3y = 0, y = 0; y < width; y++ , r3y++) {
		255	+ if (r3y == 3)
		256	+ r3y = 0;
		257	+ for (r3x = 0, x = 0; x < width; x++ , r3x++) {
		258	+ if (r3x == 3)
		259	+ r3x = 0;
		260	+ if (!((x & y & 1) + !(!r3x \| !r3y)) && !ismasked(x, y))
		261	+ qrframe[x + y * width] ^= 1;
		262	+ }
		263	+ }
		264	+ break;
		265	+ case 6:
		266	+ for (r3y = 0, y = 0; y < width; y++ , r3y++) {
		267	+ if (r3y == 3)
		268	+ r3y = 0;
		269	+ for (r3x = 0, x = 0; x < width; x++ , r3x++) {
		270	+ if (r3x == 3)
		271	+ r3x = 0;
		272	+ if (!(((x & y & 1) + (r3x && (r3x == r3y))) & 1) && !ismasked(x, y))
		273	+ qrframe[x + y * width] ^= 1;
		274	+ }
		275	+ }
		276	+ break;
		277	+ case 7:
		278	+ for (r3y = 0, y = 0; y < width; y++ , r3y++) {
		279	+ if (r3y == 3)
		280	+ r3y = 0;
		281	+ for (r3x = 0, x = 0; x < width; x++ , r3x++) {
		282	+ if (r3x == 3)
		283	+ r3x = 0;
		284	+ if (!(((r3x && (r3x == r3y)) + ((x + y) & 1)) & 1) && !ismasked(x, y))
		285	+ qrframe[x + y * width] ^= 1;
		286	+ }
		287	+ }
		288	+ break;
		289	+ }
		290	+ return;
		291	+ }
		292	+
		293	+ // Badness coefficients.
		294	+ var N1 = 3, N2 = 3, N3 = 40, N4 = 10;
		295	+
		296	+ // Using the table of the length of each run, calculate the amount of bad image
		297	+ // - long runs or those that look like finders; called twice, once each for X and Y
		298	+ function badruns(length) {
		299	+ var i;
		300	+ var runsbad = 0;
		301	+ for (i = 0; i <= length; i++)
		302	+ if (rlens[i] >= 5)
		303	+ runsbad += N1 + rlens[i] - 5;
		304	+ // BwBBBwB as in finder
		305	+ for (i = 3; i < length - 1; i += 2)
		306	+ if (rlens[i - 2] == rlens[i + 2]
		307	+ && rlens[i + 2] == rlens[i - 1]
		308	+ && rlens[i - 1] == rlens[i + 1]
		309	+ && rlens[i - 1] * 3 == rlens[i]
		310	+ // white around the black pattern? Not part of spec
		311	+ && (rlens[i - 3] == 0 // beginning
		312	+ \|\| i + 3 > length // end
		313	+ \|\| rlens[i - 3] * 3 >= rlens[i] * 4 \|\| rlens[i + 3] * 3 >= rlens[i] * 4)
		314	+ )
		315	+ runsbad += N3;
		316	+ return runsbad;
		317	+ }
		318	+
		319	+ // Calculate how bad the masked image is - blocks, imbalance, runs, or finders.
		320	+ function badcheck() {
		321	+ var x, y, h, b, b1;
		322	+ var thisbad = 0;
		323	+ var bw = 0;
		324	+
		325	+ // blocks of same color.
		326	+ for (y = 0; y < width - 1; y++)
		327	+ for (x = 0; x < width - 1; x++)
		328	+ if ((qrframe[x + width * y] && qrframe[(x + 1) + width * y]
		329	+ && qrframe[x + width * (y + 1)] && qrframe[(x + 1) + width * (y + 1)]) // all black
		330	+ \|\| !(qrframe[x + width * y] \|\| qrframe[(x + 1) + width * y]
		331	+ \|\| qrframe[x + width * (y + 1)] \|\| qrframe[(x + 1) + width * (y + 1)])) // all white
		332	+ thisbad += N2;
		333	+
		334	+ // X runs
		335	+ for (y = 0; y < width; y++) {
		336	+ rlens[0] = 0;
		337	+ for (h = b = x = 0; x < width; x++) {
		338	+ if ((b1 = qrframe[x + width * y]) == b)
		339	+ rlens[h]++;
		340	+ else
		341	+ rlens[++h] = 1;
		342	+ b = b1;
		343	+ bw += b ? 1 : -1;
		344	+ }
		345	+ thisbad += badruns(h);
		346	+ }
		347	+
		348	+ // black/white imbalance
		349	+ if (bw < 0)
		350	+ bw = -bw;
		351	+
		352	+ var big = bw;
		353	+ var count = 0;
		354	+ big += big << 2;
		355	+ big <<= 1;
		356	+ while (big > width * width)
		357	+ big -= width * width, count++;
		358	+ thisbad += count * N4;
		359	+
		360	+ // Y runs
		361	+ for (x = 0; x < width; x++) {
		362	+ rlens[0] = 0;
		363	+ for (h = b = y = 0; y < width; y++) {
		364	+ if ((b1 = qrframe[x + width * y]) == b)
		365	+ rlens[h]++;
		366	+ else
		367	+ rlens[++h] = 1;
		368	+ b = b1;
		369	+ }
		370	+ thisbad += badruns(h);
		371	+ }
		372	+ return thisbad;
		373	+ }
		374	+
		375	+ function genframe(instring) {
		376	+ var x, y, k, t, v, i, j, m;
		377	+
		378	+ // find the smallest version that fits the string
		379	+ t = instring.length;
		380	+ version = 0;
		381	+ do {
		382	+ version++;
		383	+ k = (ecclevel - 1) * 4 + (version - 1) * 16;
		384	+ neccblk1 = eccblocks[k++];
		385	+ neccblk2 = eccblocks[k++];
		386	+ datablkw = eccblocks[k++];
		387	+ eccblkwid = eccblocks[k];
		388	+ k = datablkw * (neccblk1 + neccblk2) + neccblk2 - 3 + (version <= 9);
		389	+ if (t <= k)
		390	+ break;
		391	+ } while (version < 40);
		392	+
		393	+ // FIXME - insure that it fits insted of being truncated
		394	+ width = 17 + 4 * version;
		395	+
		396	+ // allocate, clear and setup data structures
		397	+ v = datablkw + (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
		398	+ for (t = 0; t < v; t++)
		399	+ eccbuf[t] = 0;
		400	+ strinbuf = instring.slice(0);
		401	+
		402	+ for (t = 0; t < width * width; t++)
		403	+ qrframe[t] = 0;
		404	+
		405	+ for (t = 0; t < (width * (width + 1) + 1) / 2; t++)
		406	+ framask[t] = 0;
		407	+
		408	+ // insert finders - black to frame, white to mask
		409	+ for (t = 0; t < 3; t++) {
		410	+ k = 0;
		411	+ y = 0;
		412	+ if (t == 1)
		413	+ k = (width - 7);
		414	+ if (t == 2)
		415	+ y = (width - 7);
		416	+ qrframe[(y + 3) + width * (k + 3)] = 1;
		417	+ for (x = 0; x < 6; x++) {
		418	+ qrframe[(y + x) + width * k] = 1;
		419	+ qrframe[y + width * (k + x + 1)] = 1;
		420	+ qrframe[(y + 6) + width * (k + x)] = 1;
		421	+ qrframe[(y + x + 1) + width * (k + 6)] = 1;
		422	+ }
		423	+ for (x = 1; x < 5; x++) {
		424	+ setmask(y + x, k + 1);
		425	+ setmask(y + 1, k + x + 1);
		426	+ setmask(y + 5, k + x);
		427	+ setmask(y + x + 1, k + 5);
		428	+ }
		429	+ for (x = 2; x < 4; x++) {
		430	+ qrframe[(y + x) + width * (k + 2)] = 1;
		431	+ qrframe[(y + 2) + width * (k + x + 1)] = 1;
		432	+ qrframe[(y + 4) + width * (k + x)] = 1;
		433	+ qrframe[(y + x + 1) + width * (k + 4)] = 1;
		434	+ }
		435	+ }
		436	+
		437	+ // alignment blocks
		438	+ if (version > 1) {
		439	+ t = adelta[version];
		440	+ y = width - 7;
		441	+ for (; ;) {
		442	+ x = width - 7;
		443	+ while (x > t - 3) {
		444	+ putalign(x, y);
		445	+ if (x < t)
		446	+ break;
		447	+ x -= t;
		448	+ }
		449	+ if (y <= t + 9)
		450	+ break;
		451	+ y -= t;
		452	+ putalign(6, y);
		453	+ putalign(y, 6);
		454	+ }
		455	+ }
		456	+
		457	+ // single black
		458	+ qrframe[8 + width * (width - 8)] = 1;
		459	+
		460	+ // timing gap - mask only
		461	+ for (y = 0; y < 7; y++) {
		462	+ setmask(7, y);
		463	+ setmask(width - 8, y);
		464	+ setmask(7, y + width - 7);
		465	+ }
		466	+ for (x = 0; x < 8; x++) {
		467	+ setmask(x, 7);
		468	+ setmask(x + width - 8, 7);
		469	+ setmask(x, width - 8);
		470	+ }
		471	+
		472	+ // reserve mask-format area
		473	+ for (x = 0; x < 9; x++)
		474	+ setmask(x, 8);
		475	+ for (x = 0; x < 8; x++) {
		476	+ setmask(x + width - 8, 8);
		477	+ setmask(8, x);
		478	+ }
		479	+ for (y = 0; y < 7; y++)
		480	+ setmask(8, y + width - 7);
		481	+
		482	+ // timing row/col
		483	+ for (x = 0; x < width - 14; x++)
		484	+ if (x & 1) {
		485	+ setmask(8 + x, 6);
		486	+ setmask(6, 8 + x);
		487	+ }
		488	+ else {
		489	+ qrframe[(8 + x) + width * 6] = 1;
		490	+ qrframe[6 + width * (8 + x)] = 1;
		491	+ }
		492	+
		493	+ // version block
		494	+ if (version > 6) {
		495	+ t = vpat[version - 7];
		496	+ k = 17;
		497	+ for (x = 0; x < 6; x++)
		498	+ for (y = 0; y < 3; y++ , k--)
		499	+ if (1 & (k > 11 ? version >> (k - 12) : t >> k)) {
		500	+ qrframe[(5 - x) + width * (2 - y + width - 11)] = 1;
		501	+ qrframe[(2 - y + width - 11) + width * (5 - x)] = 1;
		502	+ }
		503	+ else {
		504	+ setmask(5 - x, 2 - y + width - 11);
		505	+ setmask(2 - y + width - 11, 5 - x);
		506	+ }
		507	+ }
		508	+
		509	+ // sync mask bits - only set above for white spaces, so add in black bits
		510	+ for (y = 0; y < width; y++)
		511	+ for (x = 0; x <= y; x++)
		512	+ if (qrframe[x + width * y])
		513	+ setmask(x, y);
		514	+
		515	+ // convert string to bitstream
		516	+ // 8 bit data to QR-coded 8 bit data (numeric or alphanum, or kanji not supported)
		517	+ v = strinbuf.length;
		518	+
		519	+ // string to array
		520	+ for (i = 0; i < v; i++)
		521	+ eccbuf[i] = strinbuf.charCodeAt(i);
		522	+ strinbuf = eccbuf.slice(0);
		523	+
		524	+ // calculate max string length
		525	+ x = datablkw * (neccblk1 + neccblk2) + neccblk2;
		526	+ if (v >= x - 2) {
		527	+ v = x - 2;
		528	+ if (version > 9)
		529	+ v--;
		530	+ }
		531	+
		532	+ // shift and repack to insert length prefix
		533	+ i = v;
		534	+ if (version > 9) {
		535	+ strinbuf[i + 2] = 0;
		536	+ strinbuf[i + 3] = 0;
		537	+ while (i--) {
		538	+ t = strinbuf[i];
		539	+ strinbuf[i + 3] \|= 255 & (t << 4);
		540	+ strinbuf[i + 2] = t >> 4;
		541	+ }
		542	+ strinbuf[2] \|= 255 & (v << 4);
		543	+ strinbuf[1] = v >> 4;
		544	+ strinbuf[0] = 0x40 \| (v >> 12);
		545	+ }
		546	+ else {
		547	+ strinbuf[i + 1] = 0;
		548	+ strinbuf[i + 2] = 0;
		549	+ while (i--) {
		550	+ t = strinbuf[i];
		551	+ strinbuf[i + 2] \|= 255 & (t << 4);
		552	+ strinbuf[i + 1] = t >> 4;
		553	+ }
		554	+ strinbuf[1] \|= 255 & (v << 4);
		555	+ strinbuf[0] = 0x40 \| (v >> 4);
		556	+ }
		557	+ // fill to end with pad pattern
		558	+ i = v + 3 - (version < 10);
		559	+ while (i < x) {
		560	+ strinbuf[i++] = 0xec;
		561	+ // buffer has room if (i == x) break;
		562	+ strinbuf[i++] = 0x11;
		563	+ }
		564	+
		565	+ // calculate and append ECC
		566	+
		567	+ // calculate generator polynomial
		568	+ genpoly[0] = 1;
		569	+ for (i = 0; i < eccblkwid; i++) {
		570	+ genpoly[i + 1] = 1;
		571	+ for (j = i; j > 0; j--)
		572	+ genpoly[j] = genpoly[j]
		573	+ ? genpoly[j - 1] ^ gexp[modnn(glog[genpoly[j]] + i)] : genpoly[j - 1];
		574	+ genpoly[0] = gexp[modnn(glog[genpoly[0]] + i)];
		575	+ }
		576	+ for (i = 0; i <= eccblkwid; i++)
		577	+ genpoly[i] = glog[genpoly[i]]; // use logs for genpoly[] to save calc step
		578	+
		579	+ // append ecc to data buffer
		580	+ k = x;
		581	+ y = 0;
		582	+ for (i = 0; i < neccblk1; i++) {
		583	+ appendrs(y, datablkw, k, eccblkwid);
		584	+ y += datablkw;
		585	+ k += eccblkwid;
		586	+ }
		587	+ for (i = 0; i < neccblk2; i++) {
		588	+ appendrs(y, datablkw + 1, k, eccblkwid);
		589	+ y += datablkw + 1;
		590	+ k += eccblkwid;
		591	+ }
		592	+ // interleave blocks
		593	+ y = 0;
		594	+ for (i = 0; i < datablkw; i++) {
		595	+ for (j = 0; j < neccblk1; j++)
		596	+ eccbuf[y++] = strinbuf[i + j * datablkw];
		597	+ for (j = 0; j < neccblk2; j++)
		598	+ eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];
		599	+ }
		600	+ for (j = 0; j < neccblk2; j++)
		601	+ eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];
		602	+ for (i = 0; i < eccblkwid; i++)
		603	+ for (j = 0; j < neccblk1 + neccblk2; j++)
		604	+ eccbuf[y++] = strinbuf[x + i + j * eccblkwid];
		605	+ strinbuf = eccbuf;
		606	+
		607	+ // pack bits into frame avoiding masked area.
		608	+ x = y = width - 1;
		609	+ k = v = 1; // up, minus
		610	+ /* inteleaved data and ecc codes */
		611	+ m = (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
		612	+ for (i = 0; i < m; i++) {
		613	+ t = strinbuf[i];
		614	+ for (j = 0; j < 8; j++ , t <<= 1) {
		615	+ if (0x80 & t)
		616	+ qrframe[x + width * y] = 1;
		617	+ do { // find next fill position
		618	+ if (v)
		619	+ x--;
		620	+ else {
		621	+ x++;
		622	+ if (k) {
		623	+ if (y != 0)
		624	+ y--;
		625	+ else {
		626	+ x -= 2;
		627	+ k = !k;
		628	+ if (x == 6) {
		629	+ x--;
		630	+ y = 9;
		631	+ }
		632	+ }
		633	+ }
		634	+ else {
		635	+ if (y != width - 1)
		636	+ y++;
		637	+ else {
		638	+ x -= 2;
		639	+ k = !k;
		640	+ if (x == 6) {
		641	+ x--;
		642	+ y -= 8;
		643	+ }
		644	+ }
		645	+ }
		646	+ }
		647	+ v = !v;
		648	+ } while (ismasked(x, y));
		649	+ }
		650	+ }
		651	+
		652	+ // save pre-mask copy of frame
		653	+ strinbuf = qrframe.slice(0);
		654	+ t = 0; // best
		655	+ y = 30000; // demerit
		656	+ // for instead of while since in original arduino code
		657	+ // if an early mask was "good enough" it wouldn't try for a better one
		658	+ // since they get more complex and take longer.
		659	+ for (k = 0; k < 8; k++) {
		660	+ applymask(k); // returns black-white imbalance
		661	+ x = badcheck();
		662	+ if (x < y) { // current mask better than previous best?
		663	+ y = x;
		664	+ t = k;
		665	+ }
		666	+ if (t == 7)
		667	+ break; // don't increment i to a void redoing mask
		668	+ qrframe = strinbuf.slice(0); // reset for next pass
		669	+ }
		670	+ if (t != k) // redo best mask - none good enough, last wasn't t
		671	+ applymask(t);
		672	+
		673	+ // add in final mask/ecclevel bytes
		674	+ y = fmtword[t + ((ecclevel - 1) << 3)];
		675	+ // low byte
		676	+ for (k = 0; k < 8; k++ , y >>= 1)
		677	+ if (y & 1) {
		678	+ qrframe[(width - 1 - k) + width * 8] = 1;
		679	+ if (k < 6)
		680	+ qrframe[8 + width * k] = 1;
		681	+ else
		682	+ qrframe[8 + width * (k + 1)] = 1;
		683	+ }
		684	+ // high byte
		685	+ for (k = 0; k < 7; k++ , y >>= 1)
		686	+ if (y & 1) {
		687	+ qrframe[8 + width * (width - 7 + k)] = 1;
		688	+ if (k)
		689	+ qrframe[(6 - k) + width * 8] = 1;
		690	+ else
		691	+ qrframe[7 + width * 8] = 1;
		692	+ }
		693	+ return qrframe;
		694	+ }
		695	+
		696	+
		697	+
		698	+
		699	+ var _canvas = null;
		700	+
		701	+ var api = {
		702	+
		703	+ get ecclevel() {
		704	+ return ecclevel;
		705	+ },
		706	+
		707	+ set ecclevel(val) {
		708	+ ecclevel = val;
		709	+ },
		710	+
		711	+ get size() {
		712	+ return _size;
		713	+ },
		714	+
		715	+ set size(val) {
		716	+ _size = val
		717	+ },
		718	+
		719	+ get canvas() {
		720	+ return _canvas;
		721	+ },
		722	+
		723	+ set canvas(el) {
		724	+ _canvas = el;
		725	+ },
		726	+
		727	+ getFrame: function (string) {
		728	+ return genframe(string);
		729	+ },
		730	+ //这里的utf16to8(str)是对Text中的字符串进行转码，让其支持中文
		731	+ utf16to8: function (str) {
		732	+ var out, i, len, c;
		733	+
		734	+ out = "";
		735	+ len = str.length;
		736	+ for (i = 0; i < len; i++) {
		737	+ c = str.charCodeAt(i);
		738	+ if ((c >= 0x0001) && (c <= 0x007F)) {
		739	+ out += str.charAt(i);
		740	+ } else if (c > 0x07FF) {
		741	+ out += String.fromCharCode(0xE0 \| ((c >> 12) & 0x0F));
		742	+ out += String.fromCharCode(0x80 \| ((c >> 6) & 0x3F));
		743	+ out += String.fromCharCode(0x80 \| ((c >> 0) & 0x3F));
		744	+ } else {
		745	+ out += String.fromCharCode(0xC0 \| ((c >> 6) & 0x1F));
		746	+ out += String.fromCharCode(0x80 \| ((c >> 0) & 0x3F));
		747	+ }
		748	+ }
		749	+ return out;
		750	+ },
		751	+ /**
		752	+ * 新增$this参数，传入组件的this,兼容在组件中生成
		753	+ * @param bg 目前只能设置颜色值
		754	+ */
		755	+ draw: function (str, ctx, startX, startY, cavW, cavH, bg, color, $this, ecc) {
		756	+ var that = this;
		757	+ ecclevel = ecc \|\| ecclevel;
		758	+ if (!ctx) {
		759	+ console.warn('No canvas provided to draw QR code in!')
		760	+ return;
		761	+ }
		762	+ var size = Math.min(cavW, cavH);
		763	+ str = that.utf16to8(str);//增加中文显示
		764	+
		765	+ var frame = that.getFrame(str);
		766	+ var px = size / width;
		767	+ if (bg) {
		768	+ ctx.fillStyle = bg;
		769	+ ctx.fillRect(startX, startY, cavW, cavW);
		770	+ }
		771	+ ctx.fillStyle = color \|\| 'black';
		772	+ for (var i = 0; i < width; i++) {
		773	+ for (var j = 0; j < width; j++) {
		774	+ if (frame[j * width + i]) {
		775	+ ctx.fillRect(startX + px * i, startY + px * j, px, px);
		776	+ }
		777	+ }
		778	+ }
		779	+ }
		780	+ }
		781	+ module.exports = { api }
		782	+ // exports.draw = api;
		783	+
		784	+})();
0	\ No newline at end of file	785	\ No newline at end of file

packageB/components/painter/lib/util.js 0 → 100644

View file @5bfa8ba

		1	+
		2	+function isValidUrl(url) {
		3	+ return /(ht\|f)tp(s?):\/\/([^ \\/]\.)+[^ \\/](:[0-9]+)?\/?/.test(url);
		4	+}
		5	+
		6	+/**
		7	+ * 深度对比两个对象是否一致
		8	+ * from: https://github.com/epoberezkin/fast-deep-equal
		9	+ * @param {Object} a 对象a
		10	+ * @param {Object} b 对象b
		11	+ * @return {Boolean} 是否相同
		12	+ */
		13	+/* eslint-disable */
		14	+function equal(a, b) {
		15	+ if (a === b) return true;
		16	+
		17	+ if (a && b && typeof a == 'object' && typeof b == 'object') {
		18	+ var arrA = Array.isArray(a)
		19	+ , arrB = Array.isArray(b)
		20	+ , i
		21	+ , length
		22	+ , key;
		23	+
		24	+ if (arrA && arrB) {
		25	+ length = a.length;
		26	+ if (length != b.length) return false;
		27	+ for (i = length; i-- !== 0;)
		28	+ if (!equal(a[i], b[i])) return false;
		29	+ return true;
		30	+ }
		31	+
		32	+ if (arrA != arrB) return false;
		33	+
		34	+ var dateA = a instanceof Date
		35	+ , dateB = b instanceof Date;
		36	+ if (dateA != dateB) return false;
		37	+ if (dateA && dateB) return a.getTime() == b.getTime();
		38	+
		39	+ var regexpA = a instanceof RegExp
		40	+ , regexpB = b instanceof RegExp;
		41	+ if (regexpA != regexpB) return false;
		42	+ if (regexpA && regexpB) return a.toString() == b.toString();
		43	+
		44	+ var keys = Object.keys(a);
		45	+ length = keys.length;
		46	+
		47	+ if (length !== Object.keys(b).length)
		48	+ return false;
		49	+
		50	+ for (i = length; i-- !== 0;)
		51	+ if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
		52	+
		53	+ for (i = length; i-- !== 0;) {
		54	+ key = keys[i];
		55	+ if (!equal(a[key], b[key])) return false;
		56	+ }
		57	+
		58	+ return true;
		59	+ }
		60	+
		61	+ return a!==a && b!==b;
		62	+}
		63	+
		64	+module.exports = {
		65	+ isValidUrl,
		66	+ equal
		67	+};
		68	+

packageB/components/painter/lib/wx-canvas.js 0 → 100644

View file @5bfa8ba

		1	+// @ts-check
		2	+export default class WxCanvas {
		3	+ ctx;
		4	+ type;
		5	+ canvasId;
		6	+ canvasNode;
		7	+ stepList = [];
		8	+ canvasPrototype = {};
		9	+
		10	+ constructor(type, ctx, canvasId, isNew, canvasNode) {
		11	+ this.ctx = ctx;
		12	+ this.canvasId = canvasId;
		13	+ this.type = type;
		14	+ if (isNew) {
		15	+ this.canvasNode = canvasNode \|\| {};
		16	+ }
		17	+ }
		18	+
		19	+ set width(w) {
		20	+ if (this.canvasNode) this.canvasNode.width = w;
		21	+ }
		22	+
		23	+ get width() {
		24	+ if (this.canvasNode) return this.canvasNode.width;
		25	+ return 0;
		26	+ }
		27	+
		28	+ set height(h) {
		29	+ if (this.canvasNode) this.canvasNode.height = h;
		30	+ }
		31	+
		32	+ get height() {
		33	+ if (this.canvasNode) return this.canvasNode.height;
		34	+ return 0;
		35	+ }
		36	+
		37	+ set lineWidth(args) {
		38	+ this.canvasPrototype.lineWidth = args;
		39	+ this.stepList.push({
		40	+ action: "lineWidth",
		41	+ args,
		42	+ actionType: "set",
		43	+ });
		44	+ }
		45	+
		46	+ get lineWidth() {
		47	+ return this.canvasPrototype.lineWidth;
		48	+ }
		49	+
		50	+ set lineCap(args) {
		51	+ this.canvasPrototype.lineCap = args;
		52	+ this.stepList.push({
		53	+ action: "lineCap",
		54	+ args,
		55	+ actionType: "set",
		56	+ });
		57	+ }
		58	+
		59	+ get lineCap() {
		60	+ return this.canvasPrototype.lineCap;
		61	+ }
		62	+
		63	+ set lineJoin(args) {
		64	+ this.canvasPrototype.lineJoin = args;
		65	+ this.stepList.push({
		66	+ action: "lineJoin",
		67	+ args,
		68	+ actionType: "set",
		69	+ });
		70	+ }
		71	+
		72	+ get lineJoin() {
		73	+ return this.canvasPrototype.lineJoin;
		74	+ }
		75	+
		76	+ set miterLimit(args) {
		77	+ this.canvasPrototype.miterLimit = args;
		78	+ this.stepList.push({
		79	+ action: "miterLimit",
		80	+ args,
		81	+ actionType: "set",
		82	+ });
		83	+ }
		84	+
		85	+ get miterLimit() {
		86	+ return this.canvasPrototype.miterLimit;
		87	+ }
		88	+
		89	+ set lineDashOffset(args) {
		90	+ this.canvasPrototype.lineDashOffset = args;
		91	+ this.stepList.push({
		92	+ action: "lineDashOffset",
		93	+ args,
		94	+ actionType: "set",
		95	+ });
		96	+ }
		97	+
		98	+ get lineDashOffset() {
		99	+ return this.canvasPrototype.lineDashOffset;
		100	+ }
		101	+
		102	+ set font(args) {
		103	+ this.canvasPrototype.font = args;
		104	+ this.ctx.font = args;
		105	+ this.stepList.push({
		106	+ action: "font",
		107	+ args,
		108	+ actionType: "set",
		109	+ });
		110	+ }
		111	+
		112	+ get font() {
		113	+ return this.canvasPrototype.font;
		114	+ }
		115	+
		116	+ set textAlign(args) {
		117	+ this.canvasPrototype.textAlign = args;
		118	+ this.stepList.push({
		119	+ action: "textAlign",
		120	+ args,
		121	+ actionType: "set",
		122	+ });
		123	+ }
		124	+
		125	+ get textAlign() {
		126	+ return this.canvasPrototype.textAlign;
		127	+ }
		128	+
		129	+ set textBaseline(args) {
		130	+ this.canvasPrototype.textBaseline = args;
		131	+ this.stepList.push({
		132	+ action: "textBaseline",
		133	+ args,
		134	+ actionType: "set",
		135	+ });
		136	+ }
		137	+
		138	+ get textBaseline() {
		139	+ return this.canvasPrototype.textBaseline;
		140	+ }
		141	+
		142	+ set fillStyle(args) {
		143	+ this.canvasPrototype.fillStyle = args;
		144	+ this.stepList.push({
		145	+ action: "fillStyle",
		146	+ args,
		147	+ actionType: "set",
		148	+ });
		149	+ }
		150	+
		151	+ get fillStyle() {
		152	+ return this.canvasPrototype.fillStyle;
		153	+ }
		154	+
		155	+ set strokeStyle(args) {
		156	+ this.canvasPrototype.strokeStyle = args;
		157	+ this.stepList.push({
		158	+ action: "strokeStyle",
		159	+ args,
		160	+ actionType: "set",
		161	+ });
		162	+ }
		163	+
		164	+ get strokeStyle() {
		165	+ return this.canvasPrototype.strokeStyle;
		166	+ }
		167	+
		168	+ set globalAlpha(args) {
		169	+ this.canvasPrototype.globalAlpha = args;
		170	+ this.stepList.push({
		171	+ action: "globalAlpha",
		172	+ args,
		173	+ actionType: "set",
		174	+ });
		175	+ }
		176	+
		177	+ get globalAlpha() {
		178	+ return this.canvasPrototype.globalAlpha;
		179	+ }
		180	+
		181	+ set globalCompositeOperation(args) {
		182	+ this.canvasPrototype.globalCompositeOperation = args;
		183	+ this.stepList.push({
		184	+ action: "globalCompositeOperation",
		185	+ args,
		186	+ actionType: "set",
		187	+ });
		188	+ }
		189	+
		190	+ get globalCompositeOperation() {
		191	+ return this.canvasPrototype.globalCompositeOperation;
		192	+ }
		193	+
		194	+ set shadowColor(args) {
		195	+ this.canvasPrototype.shadowColor = args;
		196	+ this.stepList.push({
		197	+ action: "shadowColor",
		198	+ args,
		199	+ actionType: "set",
		200	+ });
		201	+ }
		202	+
		203	+ get shadowColor() {
		204	+ return this.canvasPrototype.shadowColor;
		205	+ }
		206	+
		207	+ set shadowOffsetX(args) {
		208	+ this.canvasPrototype.shadowOffsetX = args;
		209	+ this.stepList.push({
		210	+ action: "shadowOffsetX",
		211	+ args,
		212	+ actionType: "set",
		213	+ });
		214	+ }
		215	+
		216	+ get shadowOffsetX() {
		217	+ return this.canvasPrototype.shadowOffsetX;
		218	+ }
		219	+
		220	+ set shadowOffsetY(args) {
		221	+ this.canvasPrototype.shadowOffsetY = args;
		222	+ this.stepList.push({
		223	+ action: "shadowOffsetY",
		224	+ args,
		225	+ actionType: "set",
		226	+ });
		227	+ }
		228	+
		229	+ get shadowOffsetY() {
		230	+ return this.canvasPrototype.shadowOffsetY;
		231	+ }
		232	+
		233	+ set shadowBlur(args) {
		234	+ this.canvasPrototype.shadowBlur = args;
		235	+ this.stepList.push({
		236	+ action: "shadowBlur",
		237	+ args,
		238	+ actionType: "set",
		239	+ });
		240	+ }
		241	+
		242	+ get shadowBlur() {
		243	+ return this.canvasPrototype.shadowBlur;
		244	+ }
		245	+
		246	+ save() {
		247	+ this.stepList.push({
		248	+ action: "save",
		249	+ args: null,
		250	+ actionType: "func",
		251	+ });
		252	+ }
		253	+
		254	+ restore() {
		255	+ this.stepList.push({
		256	+ action: "restore",
		257	+ args: null,
		258	+ actionType: "func",
		259	+ });
		260	+ }
		261	+
		262	+ setLineDash(...args) {
		263	+ this.canvasPrototype.lineDash = args;
		264	+ this.stepList.push({
		265	+ action: "setLineDash",
		266	+ args,
		267	+ actionType: "func",
		268	+ });
		269	+ }
		270	+
		271	+ moveTo(...args) {
		272	+ this.stepList.push({
		273	+ action: "moveTo",
		274	+ args,
		275	+ actionType: "func",
		276	+ });
		277	+ }
		278	+
		279	+ closePath() {
		280	+ this.stepList.push({
		281	+ action: "closePath",
		282	+ args: null,
		283	+ actionType: "func",
		284	+ });
		285	+ }
		286	+
		287	+ lineTo(...args) {
		288	+ this.stepList.push({
		289	+ action: "lineTo",
		290	+ args,
		291	+ actionType: "func",
		292	+ });
		293	+ }
		294	+
		295	+ quadraticCurveTo(...args) {
		296	+ this.stepList.push({
		297	+ action: "quadraticCurveTo",
		298	+ args,
		299	+ actionType: "func",
		300	+ });
		301	+ }
		302	+
		303	+ bezierCurveTo(...args) {
		304	+ this.stepList.push({
		305	+ action: "bezierCurveTo",
		306	+ args,
		307	+ actionType: "func",
		308	+ });
		309	+ }
		310	+
		311	+ arcTo(...args) {
		312	+ this.stepList.push({
		313	+ action: "arcTo",
		314	+ args,
		315	+ actionType: "func",
		316	+ });
		317	+ }
		318	+
		319	+ arc(...args) {
		320	+ this.stepList.push({
		321	+ action: "arc",
		322	+ args,
		323	+ actionType: "func",
		324	+ });
		325	+ }
		326	+
		327	+ rect(...args) {
		328	+ this.stepList.push({
		329	+ action: "rect",
		330	+ args,
		331	+ actionType: "func",
		332	+ });
		333	+ }
		334	+
		335	+ scale(...args) {
		336	+ this.stepList.push({
		337	+ action: "scale",
		338	+ args,
		339	+ actionType: "func",
		340	+ });
		341	+ }
		342	+
		343	+ rotate(...args) {
		344	+ this.stepList.push({
		345	+ action: "rotate",
		346	+ args,
		347	+ actionType: "func",
		348	+ });
		349	+ }
		350	+
		351	+ translate(...args) {
		352	+ this.stepList.push({
		353	+ action: "translate",
		354	+ args,
		355	+ actionType: "func",
		356	+ });
		357	+ }
		358	+
		359	+ transform(...args) {
		360	+ this.stepList.push({
		361	+ action: "transform",
		362	+ args,
		363	+ actionType: "func",
		364	+ });
		365	+ }
		366	+
		367	+ setTransform(...args) {
		368	+ this.stepList.push({
		369	+ action: "setTransform",
		370	+ args,
		371	+ actionType: "func",
		372	+ });
		373	+ }
		374	+
		375	+ clearRect(...args) {
		376	+ this.stepList.push({
		377	+ action: "clearRect",
		378	+ args,
		379	+ actionType: "func",
		380	+ });
		381	+ }
		382	+
		383	+ fillRect(...args) {
		384	+ this.stepList.push({
		385	+ action: "fillRect",
		386	+ args,
		387	+ actionType: "func",
		388	+ });
		389	+ }
		390	+
		391	+ strokeRect(...args) {
		392	+ this.stepList.push({
		393	+ action: "strokeRect",
		394	+ args,
		395	+ actionType: "func",
		396	+ });
		397	+ }
		398	+
		399	+ fillText(...args) {
		400	+ this.stepList.push({
		401	+ action: "fillText",
		402	+ args,
		403	+ actionType: "func",
		404	+ });
		405	+ }
		406	+
		407	+ strokeText(...args) {
		408	+ this.stepList.push({
		409	+ action: "strokeText",
		410	+ args,
		411	+ actionType: "func",
		412	+ });
		413	+ }
		414	+
		415	+ beginPath() {
		416	+ this.stepList.push({
		417	+ action: "beginPath",
		418	+ args: null,
		419	+ actionType: "func",
		420	+ });
		421	+ }
		422	+
		423	+ fill() {
		424	+ this.stepList.push({
		425	+ action: "fill",
		426	+ args: null,
		427	+ actionType: "func",
		428	+ });
		429	+ }
		430	+
		431	+ stroke() {
		432	+ this.stepList.push({
		433	+ action: "stroke",
		434	+ args: null,
		435	+ actionType: "func",
		436	+ });
		437	+ }
		438	+
		439	+ drawFocusIfNeeded(...args) {
		440	+ this.stepList.push({
		441	+ action: "drawFocusIfNeeded",
		442	+ args,
		443	+ actionType: "func",
		444	+ });
		445	+ }
		446	+
		447	+ clip() {
		448	+ this.stepList.push({
		449	+ action: "clip",
		450	+ args: null,
		451	+ actionType: "func",
		452	+ });
		453	+ }
		454	+
		455	+ isPointInPath(...args) {
		456	+ this.stepList.push({
		457	+ action: "isPointInPath",
		458	+ args,
		459	+ actionType: "func",
		460	+ });
		461	+ }
		462	+
		463	+ drawImage(...args) {
		464	+ this.stepList.push({
		465	+ action: "drawImage",
		466	+ args,
		467	+ actionType: "func",
		468	+ });
		469	+ }
		470	+
		471	+ addHitRegion(...args) {
		472	+ this.stepList.push({
		473	+ action: "addHitRegion",
		474	+ args,
		475	+ actionType: "func",
		476	+ });
		477	+ }
		478	+
		479	+ removeHitRegion(...args) {
		480	+ this.stepList.push({
		481	+ action: "removeHitRegion",
		482	+ args,
		483	+ actionType: "func",
		484	+ });
		485	+ }
		486	+
		487	+ clearHitRegions(...args) {
		488	+ this.stepList.push({
		489	+ action: "clearHitRegions",
		490	+ args,
		491	+ actionType: "func",
		492	+ });
		493	+ }
		494	+
		495	+ putImageData(...args) {
		496	+ this.stepList.push({
		497	+ action: "putImageData",
		498	+ args,
		499	+ actionType: "func",
		500	+ });
		501	+ }
		502	+
		503	+ getLineDash() {
		504	+ return this.canvasPrototype.lineDash;
		505	+ }
		506	+
		507	+ createLinearGradient(...args) {
		508	+ return this.ctx.createLinearGradient(...args);
		509	+ }
		510	+
		511	+ createRadialGradient(...args) {
		512	+ if (this.type === "2d") {
		513	+ return this.ctx.createRadialGradient(...args);
		514	+ } else {
		515	+ return this.ctx.createCircularGradient(...args.slice(3, 6));
		516	+ }
		517	+ }
		518	+
		519	+ createPattern(...args) {
		520	+ return this.ctx.createPattern(...args);
		521	+ }
		522	+
		523	+ measureText(...args) {
		524	+ return this.ctx.measureText(...args);
		525	+ }
		526	+
		527	+ createImageData(...args) {
		528	+ return this.ctx.createImageData(...args);
		529	+ }
		530	+
		531	+ getImageData(...args) {
		532	+ return this.ctx.getImageData(...args);
		533	+ }
		534	+
		535	+ async draw(reserve, func) {
		536	+ const realstepList = this.stepList.slice();
		537	+ this.stepList.length = 0;
		538	+ if (this.type === "mina") {
		539	+ if (realstepList.length > 0) {
		540	+ for (const step of realstepList) {
		541	+ this.implementMinaStep(step);
		542	+ }
		543	+ this.ctx.draw(reserve, func);
		544	+ realstepList.length = 0;
		545	+ }
		546	+ } else if (this.type === "2d") {
		547	+ if (!reserve) {
		548	+ this.ctx.clearRect(0, 0, this.canvasNode.width, this.canvasNode.height);
		549	+ }
		550	+ if (realstepList.length > 0) {
		551	+ for (const step of realstepList) {
		552	+ await this.implement2DStep(step);
		553	+ }
		554	+ realstepList.length = 0;
		555	+ }
		556	+ if (func) {
		557	+ func();
		558	+ }
		559	+ }
		560	+ realstepList.length = 0;
		561	+ }
		562	+
		563	+ implementMinaStep(step) {
		564	+ switch (step.action) {
		565	+ case "textAlign": {
		566	+ this.ctx.setTextAlign(step.args);
		567	+ break;
		568	+ }
		569	+ case "textBaseline": {
		570	+ this.ctx.setTextBaseline(step.args);
		571	+ break;
		572	+ }
		573	+ default: {
		574	+ if (step.actionType === "set") {
		575	+ this.ctx[step.action] = step.args;
		576	+ } else if (step.actionType === "func") {
		577	+ if (step.args) {
		578	+ this.ctx[step.action](...step.args);
		579	+ } else {
		580	+ this.ctx[step.action]();
		581	+ }
		582	+ }
		583	+ break;
		584	+ }
		585	+ }
		586	+ }
		587	+
		588	+ implement2DStep(step) {
		589	+ return new Promise((resolve) => {
		590	+ if (step.action === "drawImage") {
		591	+ const img = this.canvasNode.createImage();
		592	+ img.src = step.args[0];
		593	+ img.onload = () => {
		594	+ this.ctx.drawImage(img, ...step.args.slice(1));
		595	+ resolve();
		596	+ };
		597	+ } else {
		598	+ if (step.actionType === "set") {
		599	+ this.ctx[step.action] = step.args;
		600	+ } else if (step.actionType === "func") {
		601	+ if (step.args) {
		602	+ this.ctx[step.action](...step.args);
		603	+ } else {
		604	+ this.ctx[step.action]();
		605	+ }
		606	+ }
		607	+ resolve();
		608	+ }
		609	+ });
		610	+ }
		611	+}

packageB/components/painter/painter.js 0 → 100644

View file @5bfa8ba

		1	+import Pen from './lib/pen';
		2	+import Downloader from './lib/downloader';
		3	+import WxCanvas from './lib/wx-canvas';
		4	+
		5	+const util = require('./lib/util');
		6	+
		7	+const downloader = new Downloader();
		8	+
		9	+// 最大尝试的绘制次数
		10	+const MAX_PAINT_COUNT = 5;
		11	+const ACTION_DEFAULT_SIZE = 24;
		12	+const ACTION_OFFSET = '2rpx';
		13	+Component({
		14	+ canvasWidthInPx: 0,
		15	+ canvasHeightInPx: 0,
		16	+ canvasNode: null,
		17	+ paintCount: 0,
		18	+ currentPalette: {},
		19	+ movingCache: {},
		20	+ outterDisabled: false,
		21	+ isDisabled: false,
		22	+ needClear: false,
		23	+ /**
		24	+ * 组件的属性列表
		25	+ */
		26	+ properties: {
		27	+ use2D: {
		28	+ type: Boolean,
		29	+ },
		30	+ customStyle: {
		31	+ type: String,
		32	+ },
		33	+ // 运行自定义选择框和删除缩放按钮
		34	+ customActionStyle: {
		35	+ type: Object,
		36	+ },
		37	+ palette: {
		38	+ type: Object,
		39	+ observer: function (newVal, oldVal) {
		40	+ if (this.isNeedRefresh(newVal, oldVal)) {
		41	+ this.paintCount = 0;
		42	+ this.startPaint();
		43	+ }
		44	+ },
		45	+ },
		46	+ dancePalette: {
		47	+ type: Object,
		48	+ observer: function (newVal, oldVal) {
		49	+ if (!this.isEmpty(newVal) && !this.properties.use2D) {
		50	+ this.initDancePalette(newVal);
		51	+ }
		52	+ },
		53	+ },
		54	+ // 缩放比，会在传入的 palette 中统一乘以该缩放比
		55	+ scaleRatio: {
		56	+ type: Number,
		57	+ value: 1
		58	+ },
		59	+ widthPixels: {
		60	+ type: Number,
		61	+ value: 0
		62	+ },
		63	+ // 启用脏检查，默认 false
		64	+ dirty: {
		65	+ type: Boolean,
		66	+ value: false,
		67	+ },
		68	+ LRU: {
		69	+ type: Boolean,
		70	+ value: true,
		71	+ },
		72	+ action: {
		73	+ type: Object,
		74	+ observer: function (newVal, oldVal) {
		75	+ if (newVal && !this.isEmpty(newVal) && !this.properties.use2D) {
		76	+ this.doAction(newVal, (callbackInfo) => {
		77	+ this.movingCache = callbackInfo
		78	+ }, false, true)
		79	+ }
		80	+ },
		81	+ },
		82	+ disableAction: {
		83	+ type: Boolean,
		84	+ observer: function (isDisabled) {
		85	+ this.outterDisabled = isDisabled
		86	+ this.isDisabled = isDisabled
		87	+ }
		88	+ },
		89	+ clearActionBox: {
		90	+ type: Boolean,
		91	+ observer: function (needClear) {
		92	+ if (needClear && !this.needClear) {
		93	+ if (this.frontContext) {
		94	+ setTimeout(() => {
		95	+ this.frontContext.draw();
		96	+ }, 100);
		97	+ this.touchedView = {};
		98	+ this.prevFindedIndex = this.findedIndex
		99	+ this.findedIndex = -1;
		100	+ }
		101	+ }
		102	+ this.needClear = needClear
		103	+ }
		104	+ },
		105	+ },
		106	+
		107	+ data: {
		108	+ picURL: '',
		109	+ showCanvas: true,
		110	+ painterStyle: '',
		111	+ },
		112	+
		113	+ methods: {
		114	+
		115	+ /**
		116	+ * 判断一个 object 是否为空
		117	+ * @param {object} object
		118	+ */
		119	+ isEmpty(object) {
		120	+ for (const i in object) {
		121	+ return false;
		122	+ }
		123	+ return true;
		124	+ },
		125	+
		126	+ isNeedRefresh(newVal, oldVal) {
		127	+ if (!newVal \|\| this.isEmpty(newVal) \|\| (this.data.dirty && util.equal(newVal, oldVal))) {
		128	+ return false;
		129	+ }
		130	+ return true;
		131	+ },
		132	+
		133	+ getBox(rect, type) {
		134	+ const boxArea = {
		135	+ type: 'rect',
		136	+ css: {
		137	+ height: `${rect.bottom - rect.top}px`,
		138	+ width: `${rect.right - rect.left}px`,
		139	+ left: `${rect.left}px`,
		140	+ top: `${rect.top}px`,
		141	+ borderWidth: '4rpx',
		142	+ borderColor: '#1A7AF8',
		143	+ color: 'transparent'
		144	+ }
		145	+ }
		146	+ if (type === 'text') {
		147	+ boxArea.css = Object.assign({}, boxArea.css, {
		148	+ borderStyle: 'dashed'
		149	+ })
		150	+ }
		151	+ if (this.properties.customActionStyle && this.properties.customActionStyle.border) {
		152	+ boxArea.css = Object.assign({}, boxArea.css, this.properties.customActionStyle.border)
		153	+ }
		154	+ Object.assign(boxArea, {
		155	+ id: 'box'
		156	+ })
		157	+ return boxArea
		158	+ },
		159	+
		160	+ getScaleIcon(rect, type) {
		161	+ let scaleArea = {}
		162	+ const {
		163	+ customActionStyle
		164	+ } = this.properties
		165	+ if (customActionStyle && customActionStyle.scale) {
		166	+ scaleArea = {
		167	+ type: 'image',
		168	+ url: type === 'text' ? customActionStyle.scale.textIcon : customActionStyle.scale.imageIcon,
		169	+ css: {
		170	+ height: `${2 * ACTION_DEFAULT_SIZE}rpx`,
		171	+ width: `${2 * ACTION_DEFAULT_SIZE}rpx`,
		172	+ borderRadius: `${ACTION_DEFAULT_SIZE}rpx`,
		173	+ }
		174	+ }
		175	+ } else {
		176	+ scaleArea = {
		177	+ type: 'rect',
		178	+ css: {
		179	+ height: `${2 * ACTION_DEFAULT_SIZE}rpx`,
		180	+ width: `${2 * ACTION_DEFAULT_SIZE}rpx`,
		181	+ borderRadius: `${ACTION_DEFAULT_SIZE}rpx`,
		182	+ color: '#0000ff',
		183	+ }
		184	+ }
		185	+ }
		186	+ scaleArea.css = Object.assign({}, scaleArea.css, {
		187	+ align: 'center',
		188	+ left: `${rect.right + ACTION_OFFSET.toPx()}px`,
		189	+ top: type === 'text' ? `${rect.top - ACTION_OFFSET.toPx() - scaleArea.css.height.toPx() / 2}px` : `${rect.bottom - ACTION_OFFSET.toPx() - scaleArea.css.height.toPx() / 2}px`
		190	+ })
		191	+ Object.assign(scaleArea, {
		192	+ id: 'scale'
		193	+ })
		194	+ return scaleArea
		195	+ },
		196	+
		197	+ getDeleteIcon(rect) {
		198	+ let deleteArea = {}
		199	+ const {
		200	+ customActionStyle
		201	+ } = this.properties
		202	+ if (customActionStyle && customActionStyle.scale) {
		203	+ deleteArea = {
		204	+ type: 'image',
		205	+ url: customActionStyle.delete.icon,
		206	+ css: {
		207	+ height: `${2 * ACTION_DEFAULT_SIZE}rpx`,
		208	+ width: `${2 * ACTION_DEFAULT_SIZE}rpx`,
		209	+ borderRadius: `${ACTION_DEFAULT_SIZE}rpx`,
		210	+ }
		211	+ }
		212	+ } else {
		213	+ deleteArea = {
		214	+ type: 'rect',
		215	+ css: {
		216	+ height: `${2 * ACTION_DEFAULT_SIZE}rpx`,
		217	+ width: `${2 * ACTION_DEFAULT_SIZE}rpx`,
		218	+ borderRadius: `${ACTION_DEFAULT_SIZE}rpx`,
		219	+ color: '#0000ff',
		220	+ }
		221	+ }
		222	+ }
		223	+ deleteArea.css = Object.assign({}, deleteArea.css, {
		224	+ align: 'center',
		225	+ left: `${rect.left - ACTION_OFFSET.toPx()}px`,
		226	+ top: `${rect.top - ACTION_OFFSET.toPx() - deleteArea.css.height.toPx() / 2}px`
		227	+ })
		228	+ Object.assign(deleteArea, {
		229	+ id: 'delete'
		230	+ })
		231	+ return deleteArea
		232	+ },
		233	+
		234	+ doAction(action, callback, isMoving, overwrite) {
		235	+ if (this.properties.use2D) {
		236	+ return;
		237	+ }
		238	+ let newVal = null
		239	+ if (action) {
		240	+ newVal = action.view
		241	+ }
		242	+ if (newVal && newVal.id && this.touchedView.id !== newVal.id) {
		243	+ // 带 id 的动作给撤回时使用，不带 id，表示对当前选中对象进行操作
		244	+ const {
		245	+ views
		246	+ } = this.currentPalette;
		247	+ for (let i = 0; i < views.length; i++) {
		248	+ if (views[i].id === newVal.id) {
		249	+ // 跨层回撤，需要重新构建三层关系
		250	+ this.touchedView = views[i];
		251	+ this.findedIndex = i;
		252	+ this.sliceLayers();
		253	+ break
		254	+ }
		255	+ }
		256	+ }
		257	+
		258	+ const doView = this.touchedView
		259	+
		260	+ if (!doView \|\| this.isEmpty(doView)) {
		261	+ return
		262	+ }
		263	+ if (newVal && newVal.css) {
		264	+ if (overwrite) {
		265	+ doView.css = newVal.css
		266	+ } else if (Array.isArray(doView.css) && Array.isArray(newVal.css)) {
		267	+ doView.css = Object.assign({}, ...doView.css, ...newVal.css)
		268	+ } else if (Array.isArray(doView.css)) {
		269	+ doView.css = Object.assign({}, ...doView.css, newVal.css)
		270	+ } else if (Array.isArray(newVal.css)) {
		271	+ doView.css = Object.assign({}, doView.css, ...newVal.css)
		272	+ } else {
		273	+ doView.css = Object.assign({}, doView.css, newVal.css)
		274	+ }
		275	+ }
		276	+ if (newVal && newVal.rect) {
		277	+ doView.rect = newVal.rect;
		278	+ }
		279	+ if (newVal && newVal.url && doView.url && newVal.url !== doView.url) {
		280	+ downloader.download(newVal.url, this.properties.LRU).then((path) => {
		281	+ if (newVal.url.startsWith('https')) {
		282	+ doView.originUrl = newVal.url
		283	+ }
		284	+ doView.url = path;
		285	+ wx.getImageInfo({
		286	+ src: path,
		287	+ success: (res) => {
		288	+ doView.sHeight = res.height
		289	+ doView.sWidth = res.width
		290	+ this.reDraw(doView, callback, isMoving)
		291	+ },
		292	+ fail: () => {
		293	+ this.reDraw(doView, callback, isMoving)
		294	+ }
		295	+ })
		296	+ }).catch((error) => {
		297	+ // 未下载成功，直接绘制
		298	+ console.error(error)
		299	+ this.reDraw(doView, callback, isMoving)
		300	+ })
		301	+ } else {
		302	+ (newVal && newVal.text && doView.text && newVal.text !== doView.text) && (doView.text = newVal.text);
		303	+ (newVal && newVal.content && doView.content && newVal.content !== doView.content) && (doView.content = newVal.content);
		304	+ this.reDraw(doView, callback, isMoving)
		305	+ }
		306	+ },
		307	+
		308	+ reDraw(doView, callback, isMoving) {
		309	+ const draw = {
		310	+ width: this.currentPalette.width,
		311	+ height: this.currentPalette.height,
		312	+ views: this.isEmpty(doView) ? [] : [doView]
		313	+ }
		314	+ const pen = new Pen(this.globalContext, draw);
		315	+
		316	+ if (isMoving && doView.type === 'text') {
		317	+ pen.paint((callbackInfo) => {
		318	+ callback && callback(callbackInfo);
		319	+ this.triggerEvent('viewUpdate', {
		320	+ view: this.touchedView
		321	+ });
		322	+ }, true, this.movingCache);
		323	+ } else {
		324	+ // 某些机型（华为 P20）非移动和缩放场景下，只绘制一遍会偶然性图片绘制失败
		325	+ // if (!isMoving && !this.isScale) {
		326	+ // pen.paint()
		327	+ // }
		328	+ pen.paint((callbackInfo) => {
		329	+ callback && callback(callbackInfo);
		330	+ this.triggerEvent('viewUpdate', {
		331	+ view: this.touchedView
		332	+ });
		333	+ })
		334	+ }
		335	+
		336	+ const {
		337	+ rect,
		338	+ css,
		339	+ type
		340	+ } = doView
		341	+
		342	+ this.block = {
		343	+ width: this.currentPalette.width,
		344	+ height: this.currentPalette.height,
		345	+ views: this.isEmpty(doView) ? [] : [this.getBox(rect, doView.type)]
		346	+ }
		347	+ if (css && css.scalable) {
		348	+ this.block.views.push(this.getScaleIcon(rect, type))
		349	+ }
		350	+ if (css && css.deletable) {
		351	+ this.block.views.push(this.getDeleteIcon(rect))
		352	+ }
		353	+ const topBlock = new Pen(this.frontContext, this.block)
		354	+ topBlock.paint();
		355	+ },
		356	+
		357	+ isInView(x, y, rect) {
		358	+ return (x > rect.left &&
		359	+ y > rect.top &&
		360	+ x < rect.right &&
		361	+ y < rect.bottom
		362	+ )
		363	+ },
		364	+
		365	+ isInDelete(x, y) {
		366	+ for (const view of this.block.views) {
		367	+ if (view.id === 'delete') {
		368	+ return (x > view.rect.left &&
		369	+ y > view.rect.top &&
		370	+ x < view.rect.right &&
		371	+ y < view.rect.bottom)
		372	+ }
		373	+ }
		374	+ return false
		375	+ },
		376	+
		377	+ isInScale(x, y) {
		378	+ for (const view of this.block.views) {
		379	+ if (view.id === 'scale') {
		380	+ return (x > view.rect.left &&
		381	+ y > view.rect.top &&
		382	+ x < view.rect.right &&
		383	+ y < view.rect.bottom)
		384	+ }
		385	+ }
		386	+ return false
		387	+ },
		388	+
		389	+ touchedView: {},
		390	+ findedIndex: -1,
		391	+ onClick() {
		392	+ const x = this.startX
		393	+ const y = this.startY
		394	+ const totalLayerCount = this.currentPalette.views.length
		395	+ let canBeTouched = []
		396	+ let isDelete = false
		397	+ let deleteIndex = -1
		398	+ for (let i = totalLayerCount - 1; i >= 0; i--) {
		399	+ const view = this.currentPalette.views[i]
		400	+ const {
		401	+ rect
		402	+ } = view
		403	+ if (this.touchedView && this.touchedView.id && this.touchedView.id === view.id && this.isInDelete(x, y, rect)) {
		404	+ canBeTouched.length = 0
		405	+ deleteIndex = i
		406	+ isDelete = true
		407	+ break
		408	+ }
		409	+ if (this.isInView(x, y, rect)) {
		410	+ canBeTouched.push({
		411	+ view,
		412	+ index: i
		413	+ })
		414	+ }
		415	+ }
		416	+ this.touchedView = {}
		417	+ if (canBeTouched.length === 0) {
		418	+ this.findedIndex = -1
		419	+ } else {
		420	+ let i = 0
		421	+ const touchAble = canBeTouched.filter(item => Boolean(item.view.id))
		422	+ if (touchAble.length === 0) {
		423	+ this.findedIndex = canBeTouched[0].index
		424	+ } else {
		425	+ for (i = 0; i < touchAble.length; i++) {
		426	+ if (this.findedIndex === touchAble[i].index) {
		427	+ i++
		428	+ break
		429	+ }
		430	+ }
		431	+ if (i === touchAble.length) {
		432	+ i = 0
		433	+ }
		434	+ this.touchedView = touchAble[i].view
		435	+ this.findedIndex = touchAble[i].index
		436	+ this.triggerEvent('viewClicked', {
		437	+ view: this.touchedView
		438	+ })
		439	+ }
		440	+ }
		441	+ if (this.findedIndex < 0 \|\| (this.touchedView && !this.touchedView.id)) {
		442	+ // 证明点击了背景或无法移动的view
		443	+ this.frontContext.draw();
		444	+ if (isDelete) {
		445	+ this.triggerEvent('touchEnd', {
		446	+ view: this.currentPalette.views[deleteIndex],
		447	+ index: deleteIndex,
		448	+ type: 'delete'
		449	+ })
		450	+ this.doAction()
		451	+ } else if (this.findedIndex < 0) {
		452	+ this.triggerEvent('viewClicked', {})
		453	+ }
		454	+ this.findedIndex = -1
		455	+ this.prevFindedIndex = -1
		456	+ } else if (this.touchedView && this.touchedView.id) {
		457	+ this.sliceLayers();
		458	+ }
		459	+ },
		460	+
		461	+ sliceLayers() {
		462	+ const bottomLayers = this.currentPalette.views.slice(0, this.findedIndex)
		463	+ const topLayers = this.currentPalette.views.slice(this.findedIndex + 1)
		464	+ const bottomDraw = {
		465	+ width: this.currentPalette.width,
		466	+ height: this.currentPalette.height,
		467	+ background: this.currentPalette.background,
		468	+ views: bottomLayers
		469	+ }
		470	+ const topDraw = {
		471	+ width: this.currentPalette.width,
		472	+ height: this.currentPalette.height,
		473	+ views: topLayers
		474	+ }
		475	+ if (this.prevFindedIndex < this.findedIndex) {
		476	+ new Pen(this.bottomContext, bottomDraw).paint();
		477	+ this.doAction(null, (callbackInfo) => {
		478	+ this.movingCache = callbackInfo
		479	+ })
		480	+ new Pen(this.topContext, topDraw).paint();
		481	+ } else {
		482	+ new Pen(this.topContext, topDraw).paint();
		483	+ this.doAction(null, (callbackInfo) => {
		484	+ this.movingCache = callbackInfo
		485	+ })
		486	+ new Pen(this.bottomContext, bottomDraw).paint();
		487	+ }
		488	+ this.prevFindedIndex = this.findedIndex
		489	+ },
		490	+
		491	+ startX: 0,
		492	+ startY: 0,
		493	+ startH: 0,
		494	+ startW: 0,
		495	+ isScale: false,
		496	+ startTimeStamp: 0,
		497	+ onTouchStart(event) {
		498	+ if (this.isDisabled) {
		499	+ return
		500	+ }
		501	+ const {
		502	+ x,
		503	+ y
		504	+ } = event.touches[0]
		505	+ this.startX = x
		506	+ this.startY = y
		507	+ this.startTimeStamp = new Date().getTime()
		508	+ if (this.touchedView && !this.isEmpty(this.touchedView)) {
		509	+ const {
		510	+ rect
		511	+ } = this.touchedView
		512	+ if (this.isInScale(x, y, rect)) {
		513	+ this.isScale = true
		514	+ this.movingCache = {}
		515	+ this.startH = rect.bottom - rect.top
		516	+ this.startW = rect.right - rect.left
		517	+ } else {
		518	+ this.isScale = false
		519	+ }
		520	+ } else {
		521	+ this.isScale = false
		522	+ }
		523	+ },
		524	+
		525	+ onTouchEnd(e) {
		526	+ if (this.isDisabled) {
		527	+ return
		528	+ }
		529	+ const current = new Date().getTime()
		530	+ if ((current - this.startTimeStamp) <= 500 && !this.hasMove) {
		531	+ !this.isScale && this.onClick(e)
		532	+ } else if (this.touchedView && !this.isEmpty(this.touchedView)) {
		533	+ this.triggerEvent('touchEnd', {
		534	+ view: this.touchedView,
		535	+ })
		536	+ }
		537	+ this.hasMove = false
		538	+ },
		539	+
		540	+ onTouchCancel(e) {
		541	+ if (this.isDisabled) {
		542	+ return
		543	+ }
		544	+ this.onTouchEnd(e)
		545	+ },
		546	+
		547	+ hasMove: false,
		548	+ onTouchMove(event) {
		549	+ if (this.isDisabled) {
		550	+ return
		551	+ }
		552	+ this.hasMove = true
		553	+ if (!this.touchedView \|\| (this.touchedView && !this.touchedView.id)) {
		554	+ return
		555	+ }
		556	+ const {
		557	+ x,
		558	+ y
		559	+ } = event.touches[0]
		560	+ const offsetX = x - this.startX
		561	+ const offsetY = y - this.startY
		562	+ const {
		563	+ rect,
		564	+ type
		565	+ } = this.touchedView
		566	+ let css = {}
		567	+ if (this.isScale) {
		568	+ const newW = this.startW + offsetX > 1 ? this.startW + offsetX : 1
		569	+ if (this.touchedView.css && this.touchedView.css.minWidth) {
		570	+ if (newW < this.touchedView.css.minWidth.toPx()) {
		571	+ return
		572	+ }
		573	+ }
		574	+ if (this.touchedView.rect && this.touchedView.rect.minWidth) {
		575	+ if (newW < this.touchedView.rect.minWidth) {
		576	+ return
		577	+ }
		578	+ }
		579	+ const newH = this.startH + offsetY > 1 ? this.startH + offsetY : 1
		580	+ css = {
		581	+ width: `${newW}px`,
		582	+ }
		583	+ if (type !== 'text') {
		584	+ if (type === 'image') {
		585	+ css.height = `${(newW) * this.startH / this.startW }px`
		586	+ } else {
		587	+ css.height = `${newH}px`
		588	+ }
		589	+ }
		590	+ } else {
		591	+ this.startX = x
		592	+ this.startY = y
		593	+ css = {
		594	+ left: `${rect.x + offsetX}px`,
		595	+ top: `${rect.y + offsetY}px`,
		596	+ right: undefined,
		597	+ bottom: undefined
		598	+ }
		599	+ }
		600	+ this.doAction({
		601	+ view: {
		602	+ css
		603	+ }
		604	+ }, (callbackInfo) => {
		605	+ if (this.isScale) {
		606	+ this.movingCache = callbackInfo
		607	+ }
		608	+ }, !this.isScale)
		609	+ },
		610	+
		611	+ initScreenK() {
		612	+ if (!(getApp() && getApp().systemInfo && getApp().systemInfo.screenWidth)) {
		613	+ try {
		614	+ getApp().systemInfo = wx.getSystemInfoSync();
		615	+ } catch (e) {
		616	+ console.error(`Painter get system info failed, ${JSON.stringify(e)}`);
		617	+ return;
		618	+ }
		619	+ }
		620	+ this.screenK = 0.5;
		621	+ if (getApp() && getApp().systemInfo && getApp().systemInfo.screenWidth) {
		622	+ this.screenK = getApp().systemInfo.screenWidth / 750;
		623	+ }
		624	+ setStringPrototype(this.screenK, this.properties.scaleRatio);
		625	+ },
		626	+
		627	+ initDancePalette() {
		628	+ if (this.properties.use2D) {
		629	+ return;
		630	+ }
		631	+ this.isDisabled = true;
		632	+ this.initScreenK();
		633	+ this.downloadImages(this.properties.dancePalette).then(async (palette) => {
		634	+ this.currentPalette = palette
		635	+ const {
		636	+ width,
		637	+ height
		638	+ } = palette;
		639	+
		640	+ if (!width \|\| !height) {
		641	+ console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
		642	+ return;
		643	+ }
		644	+ this.setData({
		645	+ painterStyle: `width:${width.toPx()}px;height:${height.toPx()}px;`,
		646	+ });
		647	+ this.frontContext \|\| (this.frontContext = await this.getCanvasContext(this.properties.use2D, 'front'));
		648	+ this.bottomContext \|\| (this.bottomContext = await this.getCanvasContext(this.properties.use2D, 'bottom'));
		649	+ this.topContext \|\| (this.topContext = await this.getCanvasContext(this.properties.use2D, 'top'));
		650	+ this.globalContext \|\| (this.globalContext = await this.getCanvasContext(this.properties.use2D, 'k-canvas'));
		651	+ new Pen(this.bottomContext, palette, this.properties.use2D).paint(() => {
		652	+ this.isDisabled = false;
		653	+ this.isDisabled = this.outterDisabled;
		654	+ this.triggerEvent('didShow');
		655	+ });
		656	+ this.globalContext.draw();
		657	+ this.frontContext.draw();
		658	+ this.topContext.draw();
		659	+ });
		660	+ this.touchedView = {};
		661	+ },
		662	+
		663	+ startPaint() {
		664	+ this.initScreenK();
		665	+
		666	+ this.downloadImages(this.properties.palette).then(async (palette) => {
		667	+ const {
		668	+ width,
		669	+ height
		670	+ } = palette;
		671	+
		672	+ if (!width \|\| !height) {
		673	+ console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
		674	+ return;
		675	+ }
		676	+
		677	+ let needScale = false;
		678	+ // 生成图片时，根据设置的像素值重新绘制
		679	+ if (width.toPx() !== this.canvasWidthInPx) {
		680	+ this.canvasWidthInPx = width.toPx();
		681	+ needScale = this.properties.use2D;
		682	+ }
		683	+ if (this.properties.widthPixels) {
		684	+ setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx)
		685	+ this.canvasWidthInPx = this.properties.widthPixels
		686	+ }
		687	+
		688	+ if (this.canvasHeightInPx !== height.toPx()) {
		689	+ this.canvasHeightInPx = height.toPx();
		690	+ needScale = needScale \|\| this.properties.use2D;
		691	+ }
		692	+ this.setData({
		693	+ photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
		694	+ });
		695	+ if (!this.photoContext) {
		696	+ this.photoContext = await this.getCanvasContext(this.properties.use2D, 'photo');
		697	+ }
		698	+ if (needScale) {
		699	+ const scale = getApp().systemInfo.pixelRatio;
		700	+ this.photoContext.width = this.canvasWidthInPx * scale;
		701	+ this.photoContext.height = this.canvasHeightInPx * scale;
		702	+ this.photoContext.scale(scale, scale);
		703	+ }
		704	+ new Pen(this.photoContext, palette).paint(() => {
		705	+ this.saveImgToLocal();
		706	+ });
		707	+ setStringPrototype(this.screenK, this.properties.scaleRatio);
		708	+ });
		709	+ },
		710	+
		711	+ downloadImages(palette) {
		712	+ return new Promise((resolve, reject) => {
		713	+ let preCount = 0;
		714	+ let completeCount = 0;
		715	+ const paletteCopy = JSON.parse(JSON.stringify(palette));
		716	+ if (paletteCopy.background) {
		717	+ preCount++;
		718	+ downloader.download(paletteCopy.background, this.properties.LRU).then((path) => {
		719	+ paletteCopy.background = path;
		720	+ completeCount++;
		721	+ if (preCount === completeCount) {
		722	+ resolve(paletteCopy);
		723	+ }
		724	+ }, () => {
		725	+ completeCount++;
		726	+ if (preCount === completeCount) {
		727	+ resolve(paletteCopy);
		728	+ }
		729	+ });
		730	+ }
		731	+ if (paletteCopy.views) {
		732	+ for (const view of paletteCopy.views) {
		733	+ if (view && view.type === 'image' && view.url) {
		734	+ preCount++;
		735	+ /* eslint-disable no-loop-func */
		736	+ downloader.download(view.url, this.properties.LRU).then((path) => {
		737	+ view.originUrl = view.url;
		738	+ view.url = path;
		739	+ wx.getImageInfo({
		740	+ src: path,
		741	+ success: (res) => {
		742	+ // 获得一下图片信息，供后续裁减使用
		743	+ view.sWidth = res.width;
		744	+ view.sHeight = res.height;
		745	+ },
		746	+ fail: (error) => {
		747	+ // 如果图片坏了，则直接置空，防止坑爹的 canvas 画崩溃了
		748	+ view.url = "";
		749	+ console.error(`getImageInfo ${view.url} failed, ${JSON.stringify(error)}`);
		750	+ },
		751	+ complete: () => {
		752	+ completeCount++;
		753	+ if (preCount === completeCount) {
		754	+ resolve(paletteCopy);
		755	+ }
		756	+ },
		757	+ });
		758	+ }, () => {
		759	+ completeCount++;
		760	+ if (preCount === completeCount) {
		761	+ resolve(paletteCopy);
		762	+ }
		763	+ });
		764	+ }
		765	+ }
		766	+ }
		767	+ if (preCount === 0) {
		768	+ resolve(paletteCopy);
		769	+ }
		770	+ });
		771	+ },
		772	+
		773	+ saveImgToLocal() {
		774	+ const that = this;
		775	+ setTimeout(() => {
		776	+ wx.canvasToTempFilePath({
		777	+ canvasId: 'photo',
		778	+ canvas: that.properties.use2D ? that.canvasNode : null,
		779	+ destWidth: that.canvasWidthInPx * getApp().systemInfo.pixelRatio,
		780	+ destHeight: that.canvasHeightInPx * getApp().systemInfo.pixelRatio,
		781	+ success: function (res) {
		782	+ that.getImageInfo(res.tempFilePath);
		783	+ },
		784	+ fail: function (error) {
		785	+ console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
		786	+ that.triggerEvent('imgErr', {
		787	+ error: error
		788	+ });
		789	+ },
		790	+ }, this);
		791	+ }, 300);
		792	+ },
		793	+
		794	+
		795	+ getCanvasContext(use2D, id) {
		796	+ const that = this;
		797	+ return new Promise(resolve => {
		798	+ if (use2D) {
		799	+ const query = wx.createSelectorQuery().in(that);
		800	+ const selectId = `#${id}`;
		801	+ query.select(selectId)
		802	+ .fields({ node: true, size: true })
		803	+ .exec((res) => {
		804	+ that.canvasNode = res[0].node;
		805	+ const ctx = that.canvasNode.getContext('2d');
		806	+ const wxCanvas = new WxCanvas('2d', ctx, id, true, that.canvasNode);
		807	+ resolve(wxCanvas);
		808	+ });
		809	+ } else {
		810	+ const temp = wx.createCanvasContext(id, that);
		811	+ resolve(new WxCanvas('mina', temp, id, true));
		812	+ }
		813	+ })
		814	+ },
		815	+
		816	+ getImageInfo(filePath) {
		817	+ const that = this;
		818	+ wx.getImageInfo({
		819	+ src: filePath,
		820	+ success: (infoRes) => {
		821	+ if (that.paintCount > MAX_PAINT_COUNT) {
		822	+ const error = `The result is always fault, even we tried ${MAX_PAINT_COUNT} times`;
		823	+ console.error(error);
		824	+ that.triggerEvent('imgErr', {
		825	+ error: error
		826	+ });
		827	+ return;
		828	+ }
		829	+ // 比例相符时才证明绘制成功，否则进行强制重绘制
		830	+ if (Math.abs((infoRes.width * that.canvasHeightInPx - that.canvasWidthInPx * infoRes.height) / (infoRes.height * that.canvasHeightInPx)) < 0.01) {
		831	+ that.triggerEvent('imgOK', {
		832	+ path: filePath
		833	+ });
		834	+ } else {
		835	+ that.startPaint();
		836	+ }
		837	+ that.paintCount++;
		838	+ },
		839	+ fail: (error) => {
		840	+ console.error(`getImageInfo failed, ${JSON.stringify(error)}`);
		841	+ that.triggerEvent('imgErr', {
		842	+ error: error
		843	+ });
		844	+ },
		845	+ });
		846	+ },
		847	+ },
		848	+});
		849	+
		850	+
		851	+function setStringPrototype(screenK, scale) {
		852	+ /* eslint-disable no-extend-native */
		853	+ /**
		854	+ * 是否支持负数
		855	+ * @param {Boolean} minus 是否支持负数
		856	+ * @param {Number} baseSize 当设置了 % 号时，设置的基准值
		857	+ */
		858	+ String.prototype.toPx = function toPx(minus, baseSize) {
		859	+ if (this === '0') {
		860	+ return 0
		861	+ }
		862	+ let reg;
		863	+ if (minus) {
		864	+ reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx\|px\|%)$/g;
		865	+ } else {
		866	+ reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx\|px\|%)$/g;
		867	+ }
		868	+ const results = reg.exec(this);
		869	+ if (!this \|\| !results) {
		870	+ console.error(`The size: ${this} is illegal`);
		871	+ return 0;
		872	+ }
		873	+ const unit = results[2];
		874	+ const value = parseFloat(this);
		875	+
		876	+ let res = 0;
		877	+ if (unit === 'rpx') {
		878	+ res = Math.round(value * (screenK \|\| 0.5) * (scale \|\| 1));
		879	+ } else if (unit === 'px') {
		880	+ res = Math.round(value * (scale \|\| 1));
		881	+ } else if (unit === '%') {
		882	+ res = Math.round(value * baseSize / 100);
		883	+ }
		884	+ return res;
		885	+ };
		886	+}
0	\ No newline at end of file	887	\ No newline at end of file

packageB/components/painter/painter.json 0 → 100644

View file @5bfa8ba

		1	+{
		2	+ "component": true,
		3	+ "usingComponents": {}
		4	+}
0	\ No newline at end of file	5	\ No newline at end of file

packageB/components/painter/painter.wxml 0 → 100644

View file @5bfa8ba

		1	+<view style='position: relative;{{customStyle}};{{painterStyle}}'>
		2	+ <block wx:if="{{!use2D}}">
		3	+ <canvas canvas-id="photo" style="{{photoStyle}};position: absolute; left: -9999px; top: -9999rpx;" />
		4	+ <canvas canvas-id="bottom" style="{{painterStyle}};position: absolute;" />
		5	+ <canvas canvas-id="k-canvas" style="{{painterStyle}};position: absolute;" />
		6	+ <canvas canvas-id="top" style="{{painterStyle}};position: absolute;" />
		7	+ <canvas
		8	+ canvas-id="front"
		9	+ style="{{painterStyle}};position: absolute;"
		10	+ bindtouchstart="onTouchStart"
		11	+ bindtouchmove="onTouchMove"
		12	+ bindtouchend="onTouchEnd"
		13	+ bindtouchcancel="onTouchCancel"
		14	+ disable-scroll="{{true}}" />
		15	+ </block>
		16	+ <block wx:if="{{use2D}}">
		17	+ <canvas type="2d" id="photo" style="{{photoStyle}};" />
		18	+ <!-- <canvas type="2d" id="bottom" style="{{painterStyle}};position: absolute;" />
		19	+ <canvas type="2d" id="k-canvas" style="{{painterStyle}};position: absolute;" />
		20	+ <canvas type="2d" id="top" style="{{painterStyle}};position: absolute;" />
		21	+ <canvas
		22	+ type="2d"
		23	+ id="front"
		24	+ style="{{painterStyle}};position: absolute;"
		25	+ bindtouchstart="onTouchStart"
		26	+ bindtouchmove="onTouchMove"
		27	+ bindtouchend="onTouchEnd"
		28	+ bindtouchcancel="onTouchCancel"
		29	+ disable-scroll="{{true}}" /> -->
		30	+ </block>
		31	+</view>

packageB/pages/zuhegou/index/index.js 0 → 100644

View file @5bfa8ba

		1	+
		2	+const app = getApp();
		3	+let self = null;
		4	+
		5	+let imgDraw = {
		6	+ "width": "650px",
		7	+ "height": "843px",
		8	+ "background": "https://mshopimg.yolipai.net/miniapp/images/zhg/bg-zuhegou.jpg",
		9	+ "views": [
		10	+ { // 头像
		11	+ "type": "image",
		12	+ "url": "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/08/ChMkJlauzXWIDrXBAAdCg2xP7oYAAH9FQOpVAIAB0Kb342.jpg",
		13	+ "css": {
		14	+ "width": "100px",
		15	+ "height": "100px",
		16	+ "top": "20px",
		17	+ "left": "275px",
		18	+ "borderRadius": "100px",
		19	+ "mode": "scaleToFill",
		20	+ "borderWidth": "2px",
		21	+ "borderColor": "#fff",
		22	+ }
		23	+ },
		24	+ { //昵称
		25	+ "type": "text",
		26	+ "text": "我是店铺名称名称名称名称名称名称名称名称名称名称名称名称名称名称",
		27	+ "css": {
		28	+ "width": "400px",
		29	+ "color": "#fff",
		30	+ "top": "136px",
		31	+ "left": "137px",
		32	+ "fontSize": "26px",
		33	+ "maxLines": "1",
		34	+ }
		35	+ },
		36	+ { //10元任选3件
		37	+ "type": "text",
		38	+ "text": "10元任选3件",
		39	+ "css": {
		40	+ "color": "#fff",
		41	+ "width": "650px",
		42	+ "top": "270px",
		43	+ "fontSize": "70px",
		44	+ "maxLines": "1",
		45	+ "textAlign": "center",
		46	+ "fontWeight": "bold",
		47	+ }
		48	+ },
		49	+ { //活动时间
		50	+ "type": "text",
		51	+ "text": "活动时间：2021.07.06 - 2021.07.08",
		52	+ "css": {
		53	+ "color": "#333",
		54	+ "width": "650px",
		55	+ "top": "440px",
		56	+ "fontSize": "26px",
		57	+ "fontWeight": "normal",
		58	+ "maxLines": "1",
		59	+ "textAlign": "center"
		60	+ }
		61	+ },
		62	+ { // 码
		63	+ "type": "qrcode",
		64	+ "content": "二维码地址",
		65	+ "css": {
		66	+ "color": "#000",
		67	+ "width": "200px",
		68	+ "height": "200px",
		69	+ "top": "525px",
		70	+ "left": "225px",
		71	+ }
		72	+ },
		73	+ { // 扫码提示
		74	+ "type": "text",
		75	+ "text": "长按扫码即可参与活动",
		76	+ "css": {
		77	+ "color": "#666",
		78	+ "width": "650px",
		79	+ "top": "750px",
		80	+ "fontSize": "26px",
		81	+ "textAlign": "center"
		82	+ }
		83	+ },
		84	+ ]
		85	+};
		86	+
		87	+
		88	+Page({
		89	+
		90	+ /**
		91	+ * 页面的初始数据
		92	+ */
		93	+ data: {
		94	+ showRule: false,
		95	+ showMask: false,
		96	+ showNum: false,
		97	+ haveAdded: false,
		98	+ imgDraw: imgDraw,
		99	+ },
		100	+
		101	+ /**
		102	+ * 生命周期函数--监听页面加载
		103	+ */
		104	+ onLoad: function (options) {
		105	+ self = this;
		106	+ },
		107	+
		108	+ /**
		109	+ * 生命周期函数--监听页面初次渲染完成
		110	+ */
		111	+ onReady: function () {
		112	+
		113	+ },
		114	+
		115	+ /**
		116	+ * 生命周期函数--监听页面显示
		117	+ */
		118	+ onShow: function () {
		119	+
		120	+ },
		121	+
		122	+ /**
		123	+ * 生命周期函数--监听页面隐藏
		124	+ */
		125	+ onHide: function () {
		126	+
		127	+ },
		128	+
		129	+ /**
		130	+ * 生命周期函数--监听页面卸载
		131	+ */
		132	+ onUnload: function () {
		133	+
		134	+ },
		135	+
		136	+ /**
		137	+ * 页面相关事件处理函数--监听用户下拉动作
		138	+ */
		139	+ onPullDownRefresh: function () {
		140	+
		141	+ },
		142	+
		143	+ /**
		144	+ * 页面上拉触底事件的处理函数
		145	+ */
		146	+ onReachBottom: function () {
		147	+
		148	+ },
		149	+
		150	+ /**
		151	+ * 用户点击右上角分享
		152	+ */
		153	+ onShareAppMessage: function () {
		154	+
		155	+ },
		156	+
		157	+ /**
		158	+ * 点击规则详情,弹出规则
		159	+ */
		160	+ showRule() {
		161	+ this.setData({
		162	+ type: 0, //控制显示规则详情还是提示信息，0规则详情，1提示信息
		163	+ showRule: true,
		164	+ showMask: true,
		165	+ });
		166	+ },
		167	+
		168	+ /**
		169	+ * 点击关闭按钮关闭规则详情弹窗
		170	+ */
		171	+ closeRule() {
		172	+ this.setData({
		173	+ showRule: false,
		174	+ showMask: false,
		175	+ });
		176	+ },
		177	+
		178	+ /**
		179	+ * 点击提示信息
		180	+ */
		181	+ showInfo() {
		182	+ this.setData({
		183	+ type: 1,
		184	+ showRule: true,
		185	+ showMask: true,
		186	+ });
		187	+ },
		188	+
		189	+ /**
		190	+ * 加入购物车
		191	+ */
		192	+ addToCart() {
		193	+ let haveAdded = !this.data.haveAdded;
		194	+ let title = '';
		195	+ if(haveAdded) {
		196	+ title = '加入购物车成功';
		197	+ this.setData({
		198	+ num: 1,
		199	+ showNum: true,
		200	+ haveAdded,
		201	+ });
		202	+ wx.showToast({
		203	+ title: title,
		204	+ icon: 'success',
		205	+ });
		206	+ } else {
		207	+ wx.showModal({
		208	+ title: '温馨提示',
		209	+ content: '确定将该商品移出购物车?',
		210	+ success (res) {
		211	+ if (res.confirm) {
		212	+ console.log('用户点击确定');
		213	+ title = '移除购物车成功';
		214	+ self.setData({
		215	+ showNum: false,
		216	+ haveAdded: false,
		217	+ });
		218	+ wx.showToast({
		219	+ title: title,
		220	+ icon: 'success',
		221	+ });
		222	+ } else if (res.cancel) {
		223	+ console.log('用户点击取消')
		224	+ self.setData({
		225	+ haveAdded: true,
		226	+ });
		227	+ }
		228	+ }
		229	+ })
		230	+
		231	+ }
		232	+
		233	+ },
		234	+
		235	+ /**
		236	+ * 增加数量
		237	+ */
		238	+ add() {
		239	+ this.setData({
		240	+ num: ++this.data.num,
		241	+ });
		242	+ },
		243	+
		244	+ /**
		245	+ * 减少数量
		246	+ */
		247	+ sub() {
		248	+ let num = this.data.num;
		249	+ if(num >= 2) {
		250	+ this.setData({
		251	+ num: --this.data.num,
		252	+ });
		253	+ };
		254	+ if(num == 1) {
		255	+ // this.setData({
		256	+ // showNum: false,
		257	+ // haveAdded: false,
		258	+ // });
		259	+ wx.showModal({
		260	+ title: '温馨提示',
		261	+ content: '确定将该商品移出购物车?',
		262	+ success (res) {
		263	+ if (res.confirm) {
		264	+ console.log('用户点击确定');
		265	+ // title = '移除购物车成功';
		266	+ self.setData({
		267	+ showNum: false,
		268	+ haveAdded: false,
		269	+ });
		270	+ wx.showToast({
		271	+ title: '移除购物车成功',
		272	+ icon: 'success',
		273	+ });
		274	+ } else if (res.cancel) {
		275	+ console.log('用户点击取消')
		276	+ self.setData({
		277	+ haveAdded: true,
		278	+ });
		279	+ }
		280	+ }
		281	+ })
		282	+ }
		283	+ },
		284	+
		285	+ /**
		286	+ * 分享
		287	+ */
		288	+ share() {
		289	+ this.setData({
		290	+ showMask: true,
		291	+ showPoster: true,
		292	+ });
		293	+ },
		294	+
		295	+ /**
		296	+ * 关闭海报
		297	+ */
		298	+ closePoster() {
		299	+ this.setData({
		300	+ showMask: false,
		301	+ showPoster: false,
		302	+ });
		303	+ },
		304	+
		305	+ onImgOK(e) {
		306	+ console.log(e.detail.path);
		307	+ this.setData({
		308	+ myimg: e.detail.path,
		309	+ });
		310	+ },
		311	+})
0	\ No newline at end of file	312	\ No newline at end of file

packageB/pages/zuhegou/index/index.json 0 → 100644

View file @5bfa8ba

		1	+{
		2	+ "usingComponents": {
		3	+ "catch": "/components/catch/catch",
		4	+ "nodata": "/components/nodata/nodata",
		5	+ "painter": "/packageB/components/painter/painter"
		6	+ },
		7	+ "enablePullDownRefresh": false,
		8	+ "navigationBarTitleText": "组合购"
		9	+}
0	\ No newline at end of file	10	\ No newline at end of file

packageB/pages/zuhegou/index/index.wxml 0 → 100644

View file @5bfa8ba

		1	+<view class="container">
		2	+ <view class="flex jc_sb">
		3	+ <view class="white">以下商品10元任选3件</view>
		4	+ <view class="rule-container" bindtap="showRule">规则详情<text class="iconfont icon-arrow_right"></text></view>
		5	+ </view>
		6	+ <view class="countdown-container">距结束还剩 1天<text class="num-box">12</text>:<text class="num-box">12</text>:<text class="num-box">00</text></view>
		7	+ <!-- 商品列表 -->
		8	+ <view class="list-container">
		9	+ <view class="list">
		10	+
		11	+ <view class="list-item">
		12	+ <view class="img-container"><image src="../../../images/luckDraw/yhq.png" mode="aspectFit" class="img-block"></image></view>
		13	+ <view class="pdl20 flex f1 fdc jc_sb">
		14	+ <view>
		15	+ <view class="fs30 ellipsis-2">商品名称商品名称</view>
		16	+ <view class="num-container" wx:if="{{showNum}}">
		17	+ <text class="num-box c-dedfe3" bindtap="sub">-</text>
		18	+ <text class="num-box">{{num}}</text>
		19	+ <text class="num-box" bindtap="add">+</text>
		20	+ </view>
		21	+ </view>
		22	+
		23	+ <view class="flex jc_sb ai_end pdt12">
		24	+ <view>
		25	+ <text class="rmb fs30 c-red">0.01</text>
		26	+ <text class="rmb fs20 line-through cb">200.00</text>
		27	+ </view>
		28	+ <view class="c-red pdr10 {{haveAdded ? 'active':''}}" bindtap="addToCart"><text class="iconfont icon-gouwuche fs60"></text></view>
		29	+ </view>
		30	+ </view>
		31	+ </view>
		32	+
		33	+
		34	+ <!-- <nodata nodataContainer="t-c" wx:if="{{list.pageData.length == 0}}"></nodata> -->
		35	+ <nodata nodataContainer="t-c"></nodata>
		36	+ </view>
		37	+
		38	+ <view class="noMore">没有更多了</view>
		39	+
		40	+
		41	+ </view>
		42	+ <!-- 底部栏 -->
		43	+ <view class="bar-container">
		44	+ <view class="t-c bg-fcfb c-fa8b2b fs28 pd20">再买2件，下单立享【10元任选３件】</view>
		45	+ <view class="flex jc_sb ai_c pd20">
		46	+ <view class="fs30">合计：<text class="rmb c-red fs40">0.01</text><text class="iconfont icon-info cb fs24 mgl10" bindtap="showInfo"></text></view>
		47	+ <view class="btn-container">去购物车</view>
		48	+ </view>
		49	+ </view>
		50	+ <!-- 分享 -->
		51	+ <view class="share-container" bindtap="share">
		52	+ <text class="iconfont icon-zhuanfa fs40"></text>
		53	+ <view class="fs22 c-8">分享</view>
		54	+ </view>
		55	+
		56	+
		57	+ <!-- 规则详情和提示信息弹窗 -->
		58	+ <view class="rule-pop-container" wx:if="{{showRule}}">
		59	+ <view class="pop-title">{{!type ? '规则详情':'提示'}}<text class="iconfont icon-guan" bindtap="closeRule"></text></view>
		60	+ <block wx:if="{{!type}}">
		61	+ <view class="pdt40">
		62	+ <view class="pdb20">活动时间</view>
		63	+ <view class="">2020.12.11 18:00:00 至 2020.12.11 18:00:00</view>
		64	+ </view>
		65	+ <view class="pdt40">
		66	+ <view class="pdb20">活动内容</view>
		67	+ <view class="">
		68	+ <view class="pdb10">1、活动商品范围内，任选3件仅需10元;</view>
		69	+ <view class="">2、此优惠可无限叠加，买得越多优惠越多;</view>
		70	+ </view>
		71	+ </view>
		72	+ <view class="pdt40 pdb20">
		73	+ <view class="pdb20">优惠叠加</view>
		74	+ <view class="">不可与其他优惠活动同时使用</view>
		75	+ </view>
		76	+ </block>
		77	+ <block wx:else>
		78	+ <view class="pdt40 pdb20">
		79	+
		80	+ <!-- <view class="pdb20">优惠叠加</view> -->
		81	+
		82	+ <view class="">合计金额及提示仅为初步预估，请以最终下单金额为准。</view>
		83	+ </view>
		84	+ </block>
		85	+ <view class="pdv20">
		86	+ <view class="btn" bindtap="closeRule">我知道了</view>
		87	+ </view>
		88	+ </view>
		89	+
		90	+ <!-- 遮罩层 -->
		91	+ <view class="mask" wx:if="{{showMask}}"></view>
		92	+
		93	+ <!-- 海报 -->
		94	+ <view class="poster-container" wx:if="{{showPoster}}">
		95	+ <view class="t-r pdb20 white2"><text class="iconfont icon-close fs40" bindtap="closePoster"></text></view>
		96	+ <image src="{{myimg}}" class="poster" show-menu-by-longpress></image>
		97	+ <view class="pdt10 fs26 white2"><text class="iconfont icon-zhiwen"></text> 长按图片保存至相册</view>
		98	+ </view>
		99	+
		100	+</view>
		101	+
		102	+<painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" />
		103	+
		104	+<!-- 活动异常提醒 -->
		105	+<!-- <catch>当前活动已结束</catch> -->
		106	+
		107	+
		108	+

packageB/pages/zuhegou/index/index.wxss 0 → 100644

View file @5bfa8ba

		1	+/* packageB//pages/zuhegou/index/index.wxss */
		2	+page {
		3	+ background: #f5f5f5 linear-gradient(to bottom, #FB5A2F, #FA7958, #f5f5f5 26%) no-repeat;
		4	+}
		5	+.container {
		6	+ padding: 20rpx 20rpx 240rpx 20rpx;
		7	+}
		8	+.countdown-container {
		9	+ font-size: 26rpx;
		10	+ padding-top: 10rpx;
		11	+ color: white;
		12	+}
		13	+
		14	+.num-box {
		15	+ display: inline-block;
		16	+ background-color: rgba(255,255,255,.2);
		17	+ box-sizing: border-box;
		18	+ min-width: 40rpx;
		19	+ padding: 4rpx;
		20	+ margin: 0 8rpx;
		21	+ border-radius: 6rpx;
		22	+ text-align: center;
		23	+}
		24	+
		25	+.rule-container {
		26	+ font-size: 24rpx;
		27	+ background-color: rgba(255,255,255,.2);
		28	+ padding: 10rpx 5rpx 10rpx 20rpx;
		29	+ border-radius: 26rpx 0 0 26rpx;
		30	+ margin-right: -20rpx;
		31	+ color: white;
		32	+}
		33	+
		34	+.icon-arrow_right {
		35	+ font-size: 24rpx;
		36	+}
		37	+
		38	+.list-container {
		39	+ padding-top: 30rpx;
		40	+}
		41	+
		42	+.list {
		43	+ border-radius: 10rpx;
		44	+ background-color: white;
		45	+}
		46	+
		47	+.list-item {
		48	+ padding: 20rpx;
		49	+ display: flex;
		50	+}
		51	+
		52	+.img-container {
		53	+ width: 200rpx;
		54	+ height: 200rpx;
		55	+ background-color: #f0f0f0;
		56	+ border-radius: 8rpx;
		57	+}
		58	+
		59	+.num-container {
		60	+ font-size: 28rpx;
		61	+ padding-top: 10rpx;
		62	+ text-align: right;
		63	+}
		64	+
		65	+.num-container .num-box {
		66	+ background-color: #f3f3f3;
		67	+}
		68	+
		69	+
		70	+
		71	+.noMore {
		72	+ padding: 20rpx;
		73	+ color: #bbb;
		74	+ text-align: center;
		75	+ font-size: 26rpx;
		76	+}
		77	+
		78	+.rmb::before {
		79	+ content: '￥';
		80	+ font-size: 22rpx;
		81	+}
		82	+
		83	+.bar-container {
		84	+ position: fixed;
		85	+ left: 0;
		86	+ bottom: 0;
		87	+ width: 100%;
		88	+ background-color: white;
		89	+}
		90	+
		91	+.bg-fcfb {
		92	+ background-color: #FCFBE5;
		93	+}
		94	+
		95	+.c-fa8b2b {
		96	+ color: #FA8B2B;
		97	+}
		98	+
		99	+.c-8 {
		100	+ color: #888;
		101	+}
		102	+
		103	+.c-dedfe3 {
		104	+ color: #DEDFE3;
		105	+}
		106	+
		107	+.btn-container {
		108	+ padding: 16rpx 40rpx;
		109	+ background-color: red;
		110	+ color: white;
		111	+ font-size: 30rpx;
		112	+ border-radius: 36rpx;
		113	+ background: -webkit-linear-gradient(left,#ff5000,#ff2000) no-repeat;
		114	+}
		115	+
		116	+.share-container {
		117	+ position: fixed;
		118	+ right: 20rpx;
		119	+ bottom: 200rpx;
		120	+ width: 100rpx;
		121	+ height: 100rpx;
		122	+ border-radius: 50%;
		123	+ background-color: white;
		124	+ display: flex;
		125	+ flex-direction: column;
		126	+ justify-content: center;
		127	+ align-items: center;
		128	+ box-shadow: 0 0 16rpx #CCC;
		129	+}
		130	+
		131	+.mask {
		132	+ position: fixed;
		133	+ top: 0;
		134	+ bottom: 0;
		135	+ left: 0;
		136	+ right: 0;
		137	+ background-color: rgba(0,0,0,.6);
		138	+}
		139	+
		140	+.rule-pop-container {
		141	+ position: fixed;
		142	+ left: 0;
		143	+ bottom: 0;
		144	+ width: 100%;
		145	+ background-color: white;
		146	+ z-index: 1;
		147	+ border-radius: 16rpx 16rpx 0 0;
		148	+ padding: 0 40rpx;
		149	+ box-sizing: border-box;
		150	+ font-size: 28rpx;
		151	+ color: #444;
		152	+}
		153	+
		154	+.pop-title {
		155	+ padding: 20rpx 0;
		156	+ text-align: center;
		157	+ font-size: 32rpx;
		158	+ position: relative;
		159	+}
		160	+.icon-guan {
		161	+ position: absolute;
		162	+ right: 0;
		163	+ font-size: 26rpx;
		164	+ top: 50%;
		165	+ transform: translateY(-50%);
		166	+ color: #ccc;
		167	+}
		168	+
		169	+.btn {
		170	+ color: white;
		171	+ padding: 20rpx 0;
		172	+ text-align: center;
		173	+ border-radius: 40rpx;
		174	+ background: -webkit-linear-gradient(left,#ff5000,#ff2000) no-repeat;
		175	+}
		176	+
		177	+.active {
		178	+ color: #ccc;
		179	+}
		180	+
		181	+.poster-container {
		182	+ text-align: center;
		183	+ color: white;
		184	+ position: fixed;
		185	+ top: 50%;
		186	+ left: 50%;
		187	+ transform: translate(-50%, -50%);
		188	+}
		189	+
		190	+.poster {
		191	+ width: 650rpx;
		192	+ height: 843rpx;
		193	+ border-radius: 16rpx;
		194	+ margin: 0 auto;
		195	+}
		196	+
		197	+.white2 {
		198	+ color: rgba(255,255,255,.8);
		199	+}
0	\ No newline at end of file	200	\ No newline at end of file