open/PainterCore
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: calc 引起的 dancePalette 问题

Browse Source
This commit is contained in:
CPPAlien 2021-06-22 11:15:10 +08:00
parent 5c155bf66f
commit cdea1f2ba6
4 changed files with 369 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/calc.js
View File

@ -1,4 +1,4 @@
var calculate = function (s) {
module.exports = function (s) {
s = s.trim();
const stack = new Array();
let preSign = '+';
@ -46,5 +46,3 @@ var calculate = function (s) {
}
return ans;
};
module.exports = calculate;

81
lib/pen.js
View File

@ -1,33 +1,38 @@
const QR = require('./qrcode.js');
const GD = require('./gradient.js');
export const penCache = {
// 用于存储带 id 的 view 的 rect 信息
viewRect: {},
textLines: {},
};
export const clearPenCache = id => {
if (id) {
penCache.viewRect[id] = null;
penCache.textLines[id] = null;
} else {
penCache.viewRect = {};
penCache.textLines = {};
}
};
export default class Painter {
constructor(ctx, data) {
this.ctx = ctx;
this.data = data;
}
isMoving = false;
// 动态模板时的缓存，加速渲染
movingCache = {};
callbackInfo = {};
// 用于存储带 id 的 view 的 rect 信息
viewRect = {};
paint(callback, isMoving, movingCache) {
paint(callback) {
this.style = {
width: this.data.width.toPx(),
height: this.data.height.toPx(),
};
if (isMoving) {
this.isMoving = true;
this.movingCache = movingCache;
}
this._background();
for (const view of this.data.views) {
this._drawAbsolute(view);
}
this.ctx.draw(false, () => {
callback && callback(this.callbackInfo);
callback && callback();
});
}
@ -262,14 +267,14 @@ export default class Painter {
width = Math.round(view.sWidth / ratio);
height = Math.round(view.sHeight / ratio);
} else if (view.css.width === 'auto') {
height = view.css.height.toPx(false, this.style.height, this.viewRect);
height = view.css.height.toPx(false, this.style.height);
width = (view.sWidth / view.sHeight) * height;
} else if (view.css.height === 'auto') {
width = view.css.width.toPx(false, this.style.width, this.viewRect);
width = view.css.width.toPx(false, this.style.width);
height = (view.sHeight / view.sWidth) * width;
} else {
width = view.css.width.toPx(false, this.style.width, this.viewRect);
height = view.css.height.toPx(false, this.style.height, this.viewRect);
width = view.css.width.toPx(false, this.style.width);
height = view.css.height.toPx(false, this.style.height);
}
break;
}
@ -278,26 +283,29 @@ export default class Painter {
console.error('You should set width and height');
return;
}
width = view.css.width.toPx(false, this.style.width, this.viewRect);
height = view.css.height.toPx(false, this.style.height, this.viewRect);
width = view.css.width.toPx(false, this.style.width);
height = view.css.height.toPx(false, this.style.height);
break;
}
let x;
if (view.css && view.css.right) {
if (typeof view.css.right === 'string') {
x = this.style.width - view.css.right.toPx(true, this.style.width, this.viewRect);
x = this.style.width - view.css.right.toPx(true, this.style.width);
} else {
// 可以用数组方式，把文字长度计算进去
// [right, 文字id, 乘数（默认 1）]
const rights = view.css.right;
x = this.style.width - rights[0].toPx(true, this.style.width) - this.viewRect[rights[1]].width * (rights[2] || 1);
x =
this.style.width -
rights[0].toPx(true, this.style.width) -
penCache.viewRect[rights[1]].width * (rights[2] || 1);
}
} else if (view.css && view.css.left) {
if (typeof view.css.left === 'string') {
x = view.css.left.toPx(true, this.style.width, this.viewRect);
x = view.css.left.toPx(true, this.style.width);
} else {
const lefts = view.css.left;
x = lefts[0].toPx(true, this.style.width) + this.viewRect[lefts[1]].width * (lefts[2] || 1);
x = lefts[0].toPx(true, this.style.width) + penCache.viewRect[lefts[1]].width * (lefts[2] || 1);
}
} else {
x = 0;
@ -305,14 +313,14 @@ export default class Painter {
//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);
let y;
if (view.css && view.css.bottom) {
y = this.style.height - height - view.css.bottom.toPx(true, this.style.height, this.viewRect);
y = this.style.height - height - view.css.bottom.toPx(true, this.style.height);
} else {
if (view.css && view.css.top) {
if (typeof view.css.top === 'string') {
y = view.css.top.toPx(true, this.style.height, this.viewRect);
y = view.css.top.toPx(true, this.style.height);
} else {
const tops = view.css.top;
y = tops[0].toPx(true, this.style.height) + this.viewRect[tops[1]].height * (tops[2] || 1);
y = tops[0].toPx(true, this.style.height) + penCache.viewRect[tops[1]].height * (tops[2] || 1);
}
} else {
y = 0;
@ -396,7 +404,7 @@ export default class Painter {
}
this._doShadow(view);
if (view.id) {
this.viewRect[view.id] = {
penCache.viewRect[view.id] = {
width,
height,
left: x,
@ -520,10 +528,9 @@ export default class Painter {
this.ctx.save();
const { width, height, extra } = this._preProcess(view, view.css.background && view.css.borderRadius);
this.ctx.fillStyle = view.css.color || 'black';
if (this.isMoving && JSON.stringify(this.movingCache) !== JSON.stringify({})) {
this.viewRect[view.id] = this.movingCache.viewRect;
if (view.id && penCache.textLines[view.id]) {
this.ctx.textAlign = view.css.textAlign ? view.css.textAlign : 'left';
for (const i of this.movingCache.lineArray) {
for (const i of penCache.textLines[view.id]) {
const { measuredWith, text, x, y, textDecoration } = i;
if (view.css.textStyle === 'stroke') {
this.ctx.strokeText(text, x, y, measuredWith);
@ -550,12 +557,7 @@ export default class Painter {
const _w = this.ctx.measureText(textArray[i]).width;
textWidth = _w > textWidth ? _w : textWidth;
}
this.viewRect[view.id].width = width ? (textWidth < width ? textWidth : width) : textWidth;
if (!this.isMoving) {
Object.assign(this.callbackInfo, {
viewRect: this.viewRect[view.id],
});
}
penCache.viewRect[view.id].width = width ? (textWidth < width ? textWidth : width) : textWidth;
}
let lineIndex = 0;
for (let j = 0; j < textArray.length; ++j) {
@ -619,6 +621,7 @@ export default class Painter {
lineX = x;
break;
}
const y =
-(height / 2) +
(lineIndex === 0 ? view.css.fontSize.toPx() : view.css.fontSize.toPx() + lineIndex * lineHeight);
@ -661,16 +664,16 @@ export default class Painter {
this.ctx.strokeStyle = view.css.color;
this.ctx.stroke();
}
if (!this.isMoving) {
this.callbackInfo.lineArray
? this.callbackInfo.lineArray.push({
if (view.id) {
penCache.textLines[view.id]
? penCache.textLines[view.id].push({
text,
x,
y,
measuredWith,
textDecoration,
})
: (this.callbackInfo.lineArray = [
: (penCache.textLines[view.id] = [
{
text,
x,

508
painter.js
View File

@ -1,4 +1,4 @@
import Pen from './lib/pen';
import Pen, { penCache, clearPenCache } from './lib/pen';
import Downloader from './lib/downloader';
import WxCanvas from './lib/wx-canvas';
@ -17,7 +17,6 @@ Component({
canvasNode: null,
paintCount: 0,
currentPalette: {},
movingCache: {},
outterDisabled: false,
isDisabled: false,
needClear: false,
@ -40,6 +39,7 @@ Component({
observer: function (newVal, oldVal) {
if (this.isNeedRefresh(newVal, oldVal)) {
this.paintCount = 0;
clearPenCache();
this.startPaint();
}
},
@ -48,6 +48,7 @@ Component({
type: Object,
observer: function (newVal, oldVal) {
if (!this.isEmpty(newVal) && !this.properties.use2D) {
clearPenCache();
this.initDancePalette(newVal);
}
},
@ -55,11 +56,11 @@ Component({
// 缩放比，会在传入的 palette 中统一乘以该缩放比
scaleRatio: {
type: Number,
value: 1
value: 1,
},
widthPixels: {
type: Number,
value: 0
value: 0,
},
// 启用脏检查，默认 false
dirty: {
@ -74,18 +75,16 @@ Component({
type: Object,
observer: function (newVal, oldVal) {
if (newVal && !this.isEmpty(newVal) && !this.properties.use2D) {
this.doAction(newVal, (callbackInfo) => {
this.movingCache = callbackInfo
}, false, true)
this.doAction(newVal, null, false, true);
}
},
},
disableAction: {
type: Boolean,
observer: function (isDisabled) {
this.outterDisabled = isDisabled
this.isDisabled = isDisabled
}
this.outterDisabled = isDisabled;
this.isDisabled = isDisabled;
},
},
clearActionBox: {
type: Boolean,
@ -96,12 +95,12 @@ Component({
this.frontContext.draw();
}, 100);
this.touchedView = {};
this.prevFindedIndex = this.findedIndex
this.prevFindedIndex = this.findedIndex;
this.findedIndex = -1;
}
}
this.needClear = needClear
}
this.needClear = needClear;
},
},
},
@ -112,7 +111,6 @@ Component({
},
methods: {
/**
* 判断一个 object 是否为 空
* @param {object} object
@ -141,28 +139,26 @@ Component({
top: `${rect.top}px`,
borderWidth: '4rpx',
borderColor: '#1A7AF8',
color: 'transparent'
}
}
color: 'transparent',
},
};
if (type === 'text') {
boxArea.css = Object.assign({}, boxArea.css, {
borderStyle: 'dashed'
})
borderStyle: 'dashed',
});
}
if (this.properties.customActionStyle && this.properties.customActionStyle.border) {
boxArea.css = Object.assign({}, boxArea.css, this.properties.customActionStyle.border)
boxArea.css = Object.assign({}, boxArea.css, this.properties.customActionStyle.border);
}
Object.assign(boxArea, {
id: 'box'
})
return boxArea
id: 'box',
});
return boxArea;
},
getScaleIcon(rect, type) {
let scaleArea = {}
const {
customActionStyle
} = this.properties
let scaleArea = {};
const { customActionStyle } = this.properties;
if (customActionStyle && customActionStyle.scale) {
scaleArea = {
type: 'image',
@ -171,8 +167,8 @@ Component({
height: `${2 * ACTION_DEFAULT_SIZE}rpx`,
width: `${2 * ACTION_DEFAULT_SIZE}rpx`,
borderRadius: `${ACTION_DEFAULT_SIZE}rpx`,
}
}
},
};
} else {
scaleArea = {
type: 'rect',
@ -181,25 +177,26 @@ Component({
width: `${2 * ACTION_DEFAULT_SIZE}rpx`,
borderRadius: `${ACTION_DEFAULT_SIZE}rpx`,
color: '#0000ff',
}
}
},
};
}
scaleArea.css = Object.assign({}, scaleArea.css, {
align: 'center',
left: `${rect.right + ACTION_OFFSET.toPx()}px`,
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`
})
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`,
});
Object.assign(scaleArea, {
id: 'scale'
})
return scaleArea
id: 'scale',
});
return scaleArea;
},
getDeleteIcon(rect) {
let deleteArea = {}
const {
customActionStyle
} = this.properties
let deleteArea = {};
const { customActionStyle } = this.properties;
if (customActionStyle && customActionStyle.scale) {
deleteArea = {
type: 'image',
@ -208,8 +205,8 @@ Component({
height: `${2 * ACTION_DEFAULT_SIZE}rpx`,
width: `${2 * ACTION_DEFAULT_SIZE}rpx`,
borderRadius: `${ACTION_DEFAULT_SIZE}rpx`,
}
}
},
};
} else {
deleteArea = {
type: 'rect',
@ -218,91 +215,96 @@ Component({
width: `${2 * ACTION_DEFAULT_SIZE}rpx`,
borderRadius: `${ACTION_DEFAULT_SIZE}rpx`,
color: '#0000ff',
}
}
},
};
}
deleteArea.css = Object.assign({}, deleteArea.css, {
align: 'center',
left: `${rect.left - ACTION_OFFSET.toPx()}px`,
top: `${rect.top - ACTION_OFFSET.toPx() - deleteArea.css.height.toPx() / 2}px`
})
top: `${rect.top - ACTION_OFFSET.toPx() - deleteArea.css.height.toPx() / 2}px`,
});
Object.assign(deleteArea, {
id: 'delete'
})
return deleteArea
id: 'delete',
});
return deleteArea;
},
doAction(action, callback, isMoving, overwrite) {
if (this.properties.use2D) {
return;
}
let newVal = null
let newVal = null;
if (action) {
newVal = action.view
newVal = action.view;
}
if (newVal && newVal.id && this.touchedView.id !== newVal.id) {
// 带 id 的动作给撤回时使用，不带 id，表示对当前选中对象进行操作
const {
views
} = this.currentPalette;
const { views } = this.currentPalette;
for (let i = 0; i < views.length; i++) {
if (views[i].id === newVal.id) {
// 跨层回撤，需要重新构建三层关系
this.touchedView = views[i];
this.findedIndex = i;
this.sliceLayers();
break
break;
}
}
}
const doView = this.touchedView
const doView = this.touchedView;
if (!doView || this.isEmpty(doView)) {
return
return;
}
if (newVal && newVal.css) {
if (overwrite) {
doView.css = newVal.css
doView.css = newVal.css;
} else if (Array.isArray(doView.css) && Array.isArray(newVal.css)) {
doView.css = Object.assign({}, ...doView.css, ...newVal.css)
doView.css = Object.assign({}, ...doView.css, ...newVal.css);
} else if (Array.isArray(doView.css)) {
doView.css = Object.assign({}, ...doView.css, newVal.css)
doView.css = Object.assign({}, ...doView.css, newVal.css);
} else if (Array.isArray(newVal.css)) {
doView.css = Object.assign({}, doView.css, ...newVal.css)
doView.css = Object.assign({}, doView.css, ...newVal.css);
} else {
doView.css = Object.assign({}, doView.css, newVal.css)
doView.css = Object.assign({}, doView.css, newVal.css);
}
}
if (newVal && newVal.rect) {
doView.rect = newVal.rect;
}
if (newVal && newVal.url && doView.url && newVal.url !== doView.url) {
downloader.download(newVal.url, this.properties.LRU).then((path) => {
downloader
.download(newVal.url, this.properties.LRU)
.then(path => {
if (newVal.url.startsWith('https')) {
doView.originUrl = newVal.url
doView.originUrl = newVal.url;
}
doView.url = path;
wx.getImageInfo({
src: path,
success: (res) => {
doView.sHeight = res.height
doView.sWidth = res.width
this.reDraw(doView, callback, isMoving)
success: res => {
doView.sHeight = res.height;
doView.sWidth = res.width;
this.reDraw(doView, callback, isMoving);
},
fail: () => {
this.reDraw(doView, callback, isMoving)
}
this.reDraw(doView, callback, isMoving);
},
});
})
}).catch((error) => {
.catch(error => {
// 未下载成功，直接绘制
console.error(error)
this.reDraw(doView, callback, isMoving)
})
console.error(error);
this.reDraw(doView, callback, isMoving);
});
} else {
(newVal && newVal.text && doView.text && newVal.text !== doView.text) && (doView.text = newVal.text);
(newVal && newVal.content && doView.content && newVal.content !== doView.content) && (doView.content = newVal.content);
this.reDraw(doView, callback, isMoving)
newVal && newVal.text && doView.text && newVal.text !== doView.text && (doView.text = newVal.text);
newVal &&
newVal.content &&
doView.content &&
newVal.content !== doView.content &&
(doView.content = newVal.content);
this.reDraw(doView, callback, isMoving);
}
},
@ -310,133 +312,104 @@ Component({
const draw = {
width: this.currentPalette.width,
height: this.currentPalette.height,
views: this.isEmpty(doView) ? [] : [doView]
}
views: this.isEmpty(doView) ? [] : [doView],
};
const pen = new Pen(this.globalContext, draw);
if (isMoving && doView.type === 'text') {
pen.paint((callbackInfo) => {
pen.paint(callbackInfo => {
callback && callback(callbackInfo);
this.triggerEvent('viewUpdate', {
view: this.touchedView
view: this.touchedView,
});
}, true, this.movingCache);
} else {
// 某些机型（华为 P20）非移动和缩放场景下，只绘制一遍会偶然性图片绘制失败
// if (!isMoving && !this.isScale) {
// pen.paint()
// }
pen.paint((callbackInfo) => {
callback && callback(callbackInfo);
this.triggerEvent('viewUpdate', {
view: this.touchedView
});
})
}
const {
rect,
css,
type
} = doView
const { rect, css, type } = doView;
this.block = {
width: this.currentPalette.width,
height: this.currentPalette.height,
views: this.isEmpty(doView) ? [] : [this.getBox(rect, doView.type)]
}
views: this.isEmpty(doView) ? [] : [this.getBox(rect, doView.type)],
};
if (css && css.scalable) {
this.block.views.push(this.getScaleIcon(rect, type))
this.block.views.push(this.getScaleIcon(rect, type));
}
if (css && css.deletable) {
this.block.views.push(this.getDeleteIcon(rect))
this.block.views.push(this.getDeleteIcon(rect));
}
const topBlock = new Pen(this.frontContext, this.block)
const topBlock = new Pen(this.frontContext, this.block);
topBlock.paint();
},
isInView(x, y, rect) {
return (x > rect.left &&
y > rect.top &&
x < rect.right &&
y < rect.bottom
)
return x > rect.left && y > rect.top && x < rect.right && y < rect.bottom;
},
isInDelete(x, y) {
for (const view of this.block.views) {
if (view.id === 'delete') {
return (x > view.rect.left &&
y > view.rect.top &&
x < view.rect.right &&
y < view.rect.bottom)
return x > view.rect.left && y > view.rect.top && x < view.rect.right && y < view.rect.bottom;
}
}
return false
return false;
},
isInScale(x, y) {
for (const view of this.block.views) {
if (view.id === 'scale') {
return (x > view.rect.left &&
y > view.rect.top &&
x < view.rect.right &&
y < view.rect.bottom)
return x > view.rect.left && y > view.rect.top && x < view.rect.right && y < view.rect.bottom;
}
}
return false
return false;
},
touchedView: {},
findedIndex: -1,
onClick() {
const x = this.startX
const y = this.startY
const totalLayerCount = this.currentPalette.views.length
let canBeTouched = []
let isDelete = false
let deleteIndex = -1
const x = this.startX;
const y = this.startY;
const totalLayerCount = this.currentPalette.views.length;
let canBeTouched = [];
let isDelete = false;
let deleteIndex = -1;
for (let i = totalLayerCount - 1; i >= 0; i--) {
const view = this.currentPalette.views[i]
const {
rect
} = view
const view = this.currentPalette.views[i];
const { rect } = view;
if (this.touchedView && this.touchedView.id && this.touchedView.id === view.id && this.isInDelete(x, y, rect)) {
canBeTouched.length = 0
deleteIndex = i
isDelete = true
break
canBeTouched.length = 0;
deleteIndex = i;
isDelete = true;
break;
}
if (this.isInView(x, y, rect)) {
canBeTouched.push({
view,
index: i
})
index: i,
});
}
}
this.touchedView = {}
this.touchedView = {};
if (canBeTouched.length === 0) {
this.findedIndex = -1
this.findedIndex = -1;
} else {
let i = 0
const touchAble = canBeTouched.filter(item => Boolean(item.view.id))
let i = 0;
const touchAble = canBeTouched.filter(item => Boolean(item.view.id));
if (touchAble.length === 0) {
this.findedIndex = canBeTouched[0].index
this.findedIndex = canBeTouched[0].index;
} else {
for (i = 0; i < touchAble.length; i++) {
if (this.findedIndex === touchAble[i].index) {
i++
break
i++;
break;
}
}
if (i === touchAble.length) {
i = 0
i = 0;
}
this.touchedView = touchAble[i].view
this.findedIndex = touchAble[i].index
this.touchedView = touchAble[i].view;
this.findedIndex = touchAble[i].index;
this.triggerEvent('viewClicked', {
view: this.touchedView
})
view: this.touchedView,
});
}
}
if (this.findedIndex < 0 || (this.touchedView && !this.touchedView.id)) {
@ -446,47 +419,43 @@ Component({
this.triggerEvent('touchEnd', {
view: this.currentPalette.views[deleteIndex],
index: deleteIndex,
type: 'delete'
})
this.doAction()
type: 'delete',
});
this.doAction();
} else if (this.findedIndex < 0) {
this.triggerEvent('viewClicked', {})
this.triggerEvent('viewClicked', {});
}
this.findedIndex = -1
this.prevFindedIndex = -1
this.findedIndex = -1;
this.prevFindedIndex = -1;
} else if (this.touchedView && this.touchedView.id) {
this.sliceLayers();
}
},
sliceLayers() {
const bottomLayers = this.currentPalette.views.slice(0, this.findedIndex)
const topLayers = this.currentPalette.views.slice(this.findedIndex + 1)
const bottomLayers = this.currentPalette.views.slice(0, this.findedIndex);
const topLayers = this.currentPalette.views.slice(this.findedIndex + 1);
const bottomDraw = {
width: this.currentPalette.width,
height: this.currentPalette.height,
background: this.currentPalette.background,
views: bottomLayers
}
views: bottomLayers,
};
const topDraw = {
width: this.currentPalette.width,
height: this.currentPalette.height,
views: topLayers
}
views: topLayers,
};
if (this.prevFindedIndex < this.findedIndex) {
new Pen(this.bottomContext, bottomDraw).paint();
this.doAction(null, (callbackInfo) => {
this.movingCache = callbackInfo
})
this.doAction();
new Pen(this.topContext, topDraw).paint();
} else {
new Pen(this.topContext, topDraw).paint();
this.doAction(null, (callbackInfo) => {
this.movingCache = callbackInfo
})
this.doAction();
new Pen(this.bottomContext, bottomDraw).paint();
}
this.prevFindedIndex = this.findedIndex
this.prevFindedIndex = this.findedIndex;
},
startX: 0,
@ -497,116 +466,105 @@ Component({
startTimeStamp: 0,
onTouchStart(event) {
if (this.isDisabled) {
return
return;
}
const {
x,
y
} = event.touches[0]
this.startX = x
this.startY = y
this.startTimeStamp = new Date().getTime()
const { x, y } = event.touches[0];
this.startX = x;
this.startY = y;
this.startTimeStamp = new Date().getTime();
if (this.touchedView && !this.isEmpty(this.touchedView)) {
const {
rect
} = this.touchedView
const { rect } = this.touchedView;
if (this.isInScale(x, y, rect)) {
this.isScale = true
this.movingCache = {}
this.startH = rect.bottom - rect.top
this.startW = rect.right - rect.left
this.isScale = true;
this.startH = rect.bottom - rect.top;
this.startW = rect.right - rect.left;
} else {
this.isScale = false
this.isScale = false;
}
} else {
this.isScale = false
this.isScale = false;
}
},
onTouchEnd(e) {
if (this.isDisabled) {
return
return;
}
const current = new Date().getTime()
if ((current - this.startTimeStamp) <= 500 && !this.hasMove) {
!this.isScale && this.onClick(e)
const current = new Date().getTime();
if (current - this.startTimeStamp <= 500 && !this.hasMove) {
!this.isScale && this.onClick(e);
} else if (this.touchedView && !this.isEmpty(this.touchedView)) {
this.triggerEvent('touchEnd', {
view: this.touchedView,
})
});
}
this.hasMove = false
this.hasMove = false;
},
onTouchCancel(e) {
if (this.isDisabled) {
return
return;
}
this.onTouchEnd(e)
this.onTouchEnd(e);
},
hasMove: false,
onTouchMove(event) {
if (this.isDisabled) {
return
return;
}
this.hasMove = true
this.hasMove = true;
if (!this.touchedView || (this.touchedView && !this.touchedView.id)) {
return
return;
}
const {
x,
y
} = event.touches[0]
const offsetX = x - this.startX
const offsetY = y - this.startY
const {
rect,
type
} = this.touchedView
let css = {}
const { x, y } = event.touches[0];
const offsetX = x - this.startX;
const offsetY = y - this.startY;
const { rect, type } = this.touchedView;
let css = {};
if (this.isScale) {
const newW = this.startW + offsetX > 1 ? this.startW + offsetX : 1
clearPenCache(this.touchedView.id);
const newW = this.startW + offsetX > 1 ? this.startW + offsetX : 1;
if (this.touchedView.css && this.touchedView.css.minWidth) {
if (newW < this.touchedView.css.minWidth.toPx()) {
return
return;
}
}
if (this.touchedView.rect && this.touchedView.rect.minWidth) {
if (newW < this.touchedView.rect.minWidth) {
return
return;
}
}
const newH = this.startH + offsetY > 1 ? this.startH + offsetY : 1
const newH = this.startH + offsetY > 1 ? this.startH + offsetY : 1;
css = {
width: `${newW}px`,
}
};
if (type !== 'text') {
if (type === 'image') {
css.height = `${(newW) * this.startH / this.startW }px`
css.height = `${(newW * this.startH) / this.startW}px`;
} else {
css.height = `${newH}px`
css.height = `${newH}px`;
}
}
} else {
this.startX = x
this.startY = y
this.startX = x;
this.startY = y;
css = {
left: `${rect.x + offsetX}px`,
top: `${rect.y + offsetY}px`,
right: undefined,
bottom: undefined
bottom: undefined,
};
}
}
this.doAction({
this.doAction(
{
view: {
css
}
}, (callbackInfo) => {
if (this.isScale) {
this.movingCache = callbackInfo
}
}, !this.isScale)
css,
},
},
null,
!this.isScale,
);
},
initScreenK() {
@ -631,12 +589,9 @@ Component({
}
this.isDisabled = true;
this.initScreenK();
this.downloadImages(this.properties.dancePalette).then(async (palette) => {
this.currentPalette = palette
const {
width,
height
} = palette;
this.downloadImages(this.properties.dancePalette).then(async palette => {
this.currentPalette = palette;
const { width, height } = palette;
if (!width || !height) {
console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
@ -663,10 +618,7 @@ Component({
startPaint() {
this.initScreenK();
const {
width,
height
} = this.properties.palette;
const { width, height } = this.properties.palette;
if (!width || !height) {
console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
@ -680,17 +632,19 @@ Component({
needScale = this.properties.use2D;
}
if (this.properties.widthPixels) {
setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx)
this.canvasWidthInPx = this.properties.widthPixels
setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx);
this.canvasWidthInPx = this.properties.widthPixels;
}
if (this.canvasHeightInPx !== height.toPx()) {
this.canvasHeightInPx = height.toPx();
needScale = needScale || this.properties.use2D;
}
this.setData({
this.setData(
{
photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
}, function () {
},
function () {
this.downloadImages(this.properties.palette).then(async palette => {
if (!this.photoContext) {
this.photoContext = await this.getCanvasContext(this.properties.use2D, 'photo');
@ -706,7 +660,8 @@ Component({
});
setStringPrototype(this.screenK, this.properties.scaleRatio);
});
});
},
);
},
downloadImages(palette) {
@ -716,38 +671,42 @@ Component({
const paletteCopy = JSON.parse(JSON.stringify(palette));
if (paletteCopy.background) {
preCount++;
downloader.download(paletteCopy.background, this.properties.LRU).then((path) => {
downloader.download(paletteCopy.background, this.properties.LRU).then(
path => {
paletteCopy.background = path;
completeCount++;
if (preCount === completeCount) {
resolve(paletteCopy);
}
}, () => {
},
() => {
completeCount++;
if (preCount === completeCount) {
resolve(paletteCopy);
}
});
},
);
}
if (paletteCopy.views) {
for (const view of paletteCopy.views) {
if (view && view.type === 'image' && view.url) {
preCount++;
/* eslint-disable no-loop-func */
downloader.download(view.url, this.properties.LRU).then((path) => {
downloader.download(view.url, this.properties.LRU).then(
path => {
view.originUrl = view.url;
view.url = path;
wx.getImageInfo({
src: path,
success: (res) => {
success: res => {
// 获得一下图片信息，供后续裁减使用
view.sWidth = res.width;
view.sHeight = res.height;
},
fail: (error) => {
fail: error => {
// 如果图片坏了，则直接置空，防止坑爹的 canvas 画崩溃了
console.warn(`getImageInfo ${view.originUrl} failed, ${JSON.stringify(error)}`);
view.url = "";
view.url = '';
},
complete: () => {
completeCount++;
@ -756,12 +715,14 @@ Component({
}
},
});
}, () => {
},
() => {
completeCount++;
if (preCount === completeCount) {
resolve(paletteCopy);
}
});
},
);
}
}
}
@ -774,34 +735,37 @@ Component({
saveImgToLocal() {
const that = this;
setTimeout(() => {
wx.canvasToTempFilePath({
wx.canvasToTempFilePath(
{
canvasId: 'photo',
canvas: that.properties.use2D ? that.canvasNode : null,
destWidth: that.canvasWidthInPx * getApp().systemInfo.pixelRatio,
destHeight: that.canvasHeightInPx * getApp().systemInfo.pixelRatio,
destWidth: that.canvasWidthInPx,
destHeight: that.canvasHeightInPx,
success: function (res) {
that.getImageInfo(res.tempFilePath);
},
fail: function (error) {
console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
that.triggerEvent('imgErr', {
error: error
error: error,
});
},
}, this);
},
this,
);
}, 300);
},
getCanvasContext(use2D, id) {
const that = this;
return new Promise(resolve => {
if (use2D) {
const query = wx.createSelectorQuery().in(that);
const selectId = `#${id}`;
query.select(selectId)
query
.select(selectId)
.fields({ node: true, size: true })
.exec((res) => {
.exec(res => {
that.canvasNode = res[0].node;
const ctx = that.canvasNode.getContext('2d');
const wxCanvas = new WxCanvas('2d', ctx, id, true, that.canvasNode);
@ -811,36 +775,41 @@ Component({
const temp = wx.createCanvasContext(id, that);
resolve(new WxCanvas('mina', temp, id, true));
}
})
});
},
getImageInfo(filePath) {
const that = this;
wx.getImageInfo({
src: filePath,
success: (infoRes) => {
success: infoRes => {
if (that.paintCount > MAX_PAINT_COUNT) {
const error = `The result is always fault, even we tried ${MAX_PAINT_COUNT} times`;
console.error(error);
that.triggerEvent('imgErr', {
error: error
error: error,
});
return;
}
// 比例相符时才证明绘制成功，否则进行强制重绘制
if (Math.abs((infoRes.width * that.canvasHeightInPx - that.canvasWidthInPx * infoRes.height) / (infoRes.height * that.canvasHeightInPx)) < 0.01) {
if (
Math.abs(
(infoRes.width * that.canvasHeightInPx - that.canvasWidthInPx * infoRes.height) /
(infoRes.height * that.canvasHeightInPx),
) < 0.01
) {
that.triggerEvent('imgOK', {
path: filePath
path: filePath,
});
} else {
that.startPaint();
}
that.paintCount++;
},
fail: (error) => {
fail: error => {
console.error(`getImageInfo failed, ${JSON.stringify(error)}`);
that.triggerEvent('imgErr', {
error: error
error: error,
});
},
});
@ -848,15 +817,13 @@ Component({
},
});
function setStringPrototype(screenK, scale) {
/* eslint-disable no-extend-native */
/**
* string 到对应的 px
* @param {Number} baseSize 当设置了 % 号时，设置的基准值
* @param {Object} relativeViewRect 所相对的 view 的信息
*/
String.prototype.toPx = function toPx(_, baseSize, relativeViewRect) {
String.prototype.toPx = function toPx(_, baseSize) {
if (this === '0') {
return 0;
}
@ -881,14 +848,13 @@ function setStringPrototype(screenK, scale) {
}
return res;
};
const formula = /^calc\((.+)\)$/.exec(this)
const formula = /^calc\((.+)\)$/.exec(this);
if (formula && formula[1]) {
// 进行 calc 计算
const afterOne = formula[1].replace(/([^\s]+)\.(left|right|bottom|top|width|height)/g, (word) => {
const afterOne = formula[1].replace(/([^\s]+)\.(left|right|bottom|top|width|height)/g, word => {
const [id, attr] = word.split('.');
return relativeViewRect[id][attr]
}
);
return penCache.viewRect[id][attr];
});
const afterTwo = afterOne.replace(new RegExp(REG, 'g'), parsePx);
return calc(afterTwo);
} else {

14
painter.wxml
View File

@ -1,6 +1,7 @@
<view style='position: relative;{{customStyle}};{{painterStyle}}'>
<block wx:if="{{!use2D}}">
<canvas canvas-id="photo" style="{{photoStyle}};position: absolute; left: -9999px; top: -9999rpx;" />
<block wx:if="{{dancePalette}}">
<canvas canvas-id="bottom" style="{{painterStyle}};position: absolute;" />
<canvas canvas-id="k-canvas" style="{{painterStyle}};position: absolute;" />
<canvas canvas-id="top" style="{{painterStyle}};position: absolute;" />
@ -13,19 +14,8 @@
bindtouchcancel="onTouchCancel"
disable-scroll="{{true}}" />
</block>
</block>
<block wx:if="{{use2D}}">
<canvas type="2d" id="photo" style="{{photoStyle}};" />
<!-- <canvas type="2d" id="bottom" style="{{painterStyle}};position: absolute;" />
<canvas type="2d" id="k-canvas" style="{{painterStyle}};position: absolute;" />
<canvas type="2d" id="top" style="{{painterStyle}};position: absolute;" />
<canvas
type="2d"
id="front"
style="{{painterStyle}};position: absolute;"
bindtouchstart="onTouchStart"
bindtouchmove="onTouchMove"
bindtouchend="onTouchEnd"
bindtouchcancel="onTouchCancel"
disable-scroll="{{true}}" /> -->
</block>
</view>