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

加入撤回功能

Browse Source
This commit is contained in:
CPPAlien 2019-11-18 11:44:34 +08:00
parent 5ec7f680a8
commit d85be378c4
1 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
painter.js
View File

@ -13,10 +13,6 @@ Component({
canvasHeightInPx: 0, canvasHeightInPx: 0,
paintCount: 0, paintCount: 0,
currentPalette: {}, currentPalette: {},
globalContext: {},
frontContext: {},
bottomContext: {},
topContext: {},
/** /**
* 组件的属性列表 * 组件的属性列表
*/ */
@ -50,10 +46,12 @@ Component({
type: Boolean, type: Boolean,
value: false, value: false,
}, },
actions: { action: {
type: Object, type: Object,
observer: function (newVal, oldVal) { observer: function (newVal, oldVal) {
this.doAction(newVal) if (newVal) {
this.doAction(newVal)
}
}, },
} }
}, },
@ -85,23 +83,48 @@ Component({
}, },
doAction(newVal) { doAction(newVal) {
if (newVal && newVal.id && this.touchedView.id !== newVal.id) {
// 带 id 的动作给撤回时使用，不带 id，表示对当前选中对象进行操作
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
}
}
}
const doView = this.touchedView
if (!doView) {
return
}
if (newVal && newVal.css) { if (newVal && newVal.css) {
if (Array.isArray(this.touchedView.css)) { if (Array.isArray(doView.css) && Array.isArray(newVal.css)) {
this.touchedView.css = Object.assign({}, ...this.touchedView.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)
} else if (Array.isArray(newVal.css)) {
doView.css = Object.assign({}, doView.css, ...newVal.css)
} else { } else {
this.touchedView.css = Object.assign({}, this.touchedView.css, newVal.css) doView.css = Object.assign({}, doView.css, newVal.css)
} }
} }
const draw = { const draw = {
width: this.currentPalette.width, width: this.currentPalette.width,
height: this.currentPalette.height, height: this.currentPalette.height,
views: [this.touchedView] views: [doView]
} }
const pen = new Pen(this.globalContext, draw); const pen = new Pen(this.globalContext, draw);
pen.paint(); pen.paint();
const { const {
rect rect
} = this.touchedView } = doView
const block = { const block = {
width: this.currentPalette.width, width: this.currentPalette.width,
height: this.currentPalette.height, height: this.currentPalette.height,
@ -192,14 +215,12 @@ Component({
this.touchedView = touchAble[i].view this.touchedView = touchAble[i].view
this.findedIndex = touchAble[i].index this.findedIndex = touchAble[i].index
const { const {
rect,
id, id,
css css
} = this.touchedView } = this.touchedView
this.triggerEvent('touchStart', { this.triggerEvent('touchStart', {
id: id, id: id,
css: css, css: css,
rect: rect
}) })
} }
} }
@ -217,29 +238,34 @@ Component({
this.triggerEvent('touchStart', {}) this.triggerEvent('touchStart', {})
} }
this.findedIndex = -1 this.findedIndex = -1
this.prevFindedIndex = -1
} else if (this.touchedView && this.touchedView.id) { } else if (this.touchedView && this.touchedView.id) {
const bottomLayers = this.currentPalette.views.slice(0, this.findedIndex) this.sliceLayers()
const topLayers = this.currentPalette.views.slice(this.findedIndex + 1) }
const bottomDraw = { },
width: this.currentPalette.width,
height: this.currentPalette.height, sliceLayers() {
background: this.currentPalette.background, const bottomLayers = this.currentPalette.views.slice(0, this.findedIndex)
views: bottomLayers const topLayers = this.currentPalette.views.slice(this.findedIndex + 1)
} const bottomDraw = {
const topDraw = { width: this.currentPalette.width,
width: this.currentPalette.width, height: this.currentPalette.height,
height: this.currentPalette.height, background: this.currentPalette.background,
views: topLayers views: bottomLayers
} }
if (this.prevFindedIndex < this.findedIndex) { const topDraw = {
new Pen(this.bottomContext, bottomDraw).paint(); width: this.currentPalette.width,
this.doAction() height: this.currentPalette.height,
new Pen(this.topContext, topDraw).paint(); views: topLayers
} else { }
new Pen(this.topContext, topDraw).paint(); if (this.prevFindedIndex < this.findedIndex) {
this.doAction() new Pen(this.bottomContext, bottomDraw).paint();
new Pen(this.bottomContext, bottomDraw).paint(); this.doAction()
} new Pen(this.topContext, topDraw).paint();
} else {
new Pen(this.topContext, topDraw).paint();
this.doAction()
new Pen(this.bottomContext, bottomDraw).paint();
} }
this.prevFindedIndex = this.findedIndex this.prevFindedIndex = this.findedIndex
}, },
@ -277,8 +303,10 @@ Component({
if ((current - this.startTimeStamp) <= 500 && !this.hasMove) { if ((current - this.startTimeStamp) <= 500 && !this.hasMove) {
this.onClick(e) this.onClick(e)
} else if (this.touchedView && !this.isEmpty(this.touchedView)) { } else if (this.touchedView && !this.isEmpty(this.touchedView)) {
// 传出镜像 this.triggerEvent('touchEnd', {
this.triggerEvent('touchEnd', this.currentPalette) id: this.touchedView.id,
css: this.touchedView.css
})
} }
this.hasMove = false this.hasMove = false
}, },
@ -328,11 +356,6 @@ Component({
} }
} }
this.doAction({ this.doAction({
id: this.touchedView.id,
css
})
this.triggerEvent('touchMove', {
id: this.touchedView.id,
css css
}) })
}, },
@ -355,6 +378,12 @@ Component({
initDancePalette() { initDancePalette() {
this.initScreenK(); this.initScreenK();
this.hasIdViews = []
this.properties.dancePalette && this.properties.dancePalette.views.map(view => {
if (view.id) {
this.hasIdViews.push(view)
}
})
this.downloadImages(this.properties.dancePalette).then((palette) => { this.downloadImages(this.properties.dancePalette).then((palette) => {
this.currentPalette = palette this.currentPalette = palette
@ -370,10 +399,10 @@ Component({
this.setData({ this.setData({
painterStyle: `width:${width.toPx()}px;height:${height.toPx()}px;`, painterStyle: `width:${width.toPx()}px;height:${height.toPx()}px;`,
}); });
this.frontContext = wx.createCanvasContext('front', this); this.frontContext || (this.frontContext = wx.createCanvasContext('front', this));
this.bottomContext = wx.createCanvasContext('bottom', this); this.bottomContext || (this.bottomContext = wx.createCanvasContext('bottom', this));
this.topContext = wx.createCanvasContext('top', this); this.topContext || (this.topContext = wx.createCanvasContext('top', this));
this.globalContext = wx.createCanvasContext('k-canvas', this); this.globalContext || (this.globalContext = wx.createCanvasContext('k-canvas', this));
new Pen(this.globalContext, palette).paint(); new Pen(this.globalContext, palette).paint();
}); });
}, },
@ -403,9 +432,9 @@ Component({
this.setData({ this.setData({
photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`, photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
}); });
const photoContext = wx.createCanvasContext('photo', this); this.photoContext || (this.photoContext = wx.createCanvasContext('photo', this));
new Pen(photoContext, palette).paint(() => { new Pen(this.photoContext, palette).paint(() => {
this.saveImgToLocal(); this.saveImgToLocal();
}); });
setStringPrototype(this.screenK, 1); setStringPrototype(this.screenK, 1);