Skip to content

Commit d4dff87

Browse files
0JARVIS00JARVIS0
committed
Merge branch 'alpha' into heidao
2 parents 0e84d5b + a18bc2e commit d4dff87

File tree

5 files changed

+131
-60
lines changed

5 files changed

+131
-60
lines changed

‎components/painter/painter.js

Lines changed: 105 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,13 @@ Component({
2121
customStyle: {
2222
type: String,
2323
},
24+
// 运行自定义选择框和删除缩放按钮
25+
customActionStyle: {
26+
type: Object,
27+
},
2428
palette: {
2529
type: Object,
26-
observer: function(newVal, oldVal) {
30+
observer: function (newVal, oldVal) {
2731
if (this.isNeedRefresh(newVal, oldVal)) {
2832
this.paintCount = 0;
2933
this.startPaint();
@@ -32,7 +36,7 @@ Component({
3236
},
3337
dancePalette: {
3438
type: Object,
35-
observer: function(newVal, oldVal) {
39+
observer: function (newVal, oldVal) {
3640
if (!this.isEmpty(newVal)) {
3741
this.initDancePalette(newVal);
3842
}
@@ -49,7 +53,7 @@ Component({
4953
},
5054
action: {
5155
type: Object,
52-
observer: function(newVal, oldVal) {
56+
observer: function (newVal, oldVal) {
5357
if (newVal) {
5458
this.doAction(newVal)
5559
}
@@ -84,7 +88,7 @@ Component({
8488
},
8589

8690
getBox(rect) {
87-
return [{
91+
const boxArea = {
8892
type: 'rect',
8993
css: {
9094
height: `${rect.bottom - rect.top}px`,
@@ -95,31 +99,66 @@ Component({
9599
borderColor: '#0000ff',
96100
color: 'transparent'
97101
}
98-
}, {
99-
type: 'rect',
100-
css: {
101-
height: `${2 * ACTION_POINT_RADIUS}px`,
102-
width: `${2 * ACTION_POINT_RADIUS}px`,
103-
borderRadius: `${ACTION_POINT_RADIUS}px`,
104-
color: '#0000ff',
105-
left: `${rect.right - ACTION_POINT_RADIUS}px`,
106-
top: `${rect.bottom - ACTION_POINT_RADIUS}px`
102+
}
103+
if (this.properties.customActionStyle && this.properties.customActionStyle.border) {
104+
boxArea.css = Object.assign({}, boxArea.css, this.properties.customActionStyle.border)
105+
}
106+
Object.assign(boxArea, {
107+
id: 'box'
108+
})
109+
return boxArea
110+
},
111+
112+
getScaleIcon(rect) {
113+
let scaleArea = {}
114+
if (this.properties.customActionStyle && this.properties.customActionStyle.scale) {
115+
scaleArea = this.properties.customActionStyle.scale
116+
} else {
117+
scaleArea = {
118+
type: 'rect',
119+
css: {
120+
height: `${2 * ACTION_POINT_RADIUS}px`,
121+
width: `${2 * ACTION_POINT_RADIUS}px`,
122+
borderRadius: `${ACTION_POINT_RADIUS}px`,
123+
color: '#0000ff',
124+
}
107125
}
108-
}]
126+
}
127+
scaleArea.css = Object.assign({}, scaleArea.css, {
128+
align: 'center',
129+
left: `${rect.right}px`,
130+
top: `${rect.bottom - scaleArea.css.height.toPx() / 2}px`
131+
})
132+
Object.assign(scaleArea, {
133+
id: 'scale'
134+
})
135+
return scaleArea
109136
},
110137

111138
getDeleteIcon(rect) {
112-
return {
113-
type: 'rect',
114-
css: {
115-
height: `${2 * ACTION_POINT_RADIUS}px`,
116-
width: `${2 * ACTION_POINT_RADIUS}px`,
117-
borderRadius: `${ACTION_POINT_RADIUS}px`,
118-
color: '#0000ff',
119-
left: `${rect.left - ACTION_POINT_RADIUS}px`,
120-
top: `${rect.top - ACTION_POINT_RADIUS}px`
139+
let deleteArea = {}
140+
if (this.properties.customActionStyle && this.properties.customActionStyle.delete) {
141+
deleteArea = this.properties.customActionStyle.delete
142+
} else {
143+
deleteArea = {
144+
type: 'rect',
145+
css: {
146+
height: `${2 * ACTION_POINT_RADIUS}px`,
147+
width: `${2 * ACTION_POINT_RADIUS}px`,
148+
borderRadius: `${ACTION_POINT_RADIUS}px`,
149+
color: '#0000ff',
150+
}
121151
}
122152
}
153+
deleteArea.css = Object.assign({}, deleteArea.css, {
154+
align: 'center',
155+
left: `${rect.left}px`,
156+
top: `${rect.top - deleteArea.css.height.toPx() / 2}px`
157+
})
158+
Object.assign(deleteArea, {
159+
id: 'delete'
160+
})
161+
return deleteArea
123162
},
124163

125164
doAction(action, callback, isMoving) {
@@ -173,41 +212,51 @@ Component({
173212
const {
174213
rect
175214
} = doView
176-
const block = {
215+
this.block = {
177216
width: this.currentPalette.width,
178217
height: this.currentPalette.height,
179-
views: this.isEmpty(doView) ? [] : [...this.getBox(rect)]
218+
views: this.isEmpty(doView) ? [] : [this.getBox(rect)]
219+
}
220+
if (this.touchedView.css && this.touchedView.css.scalable) {
221+
this.block.views.push(this.getScaleIcon(rect))
180222
}
181-
if (this.touchedView.type === 'text') {
182-
block.views.push(this.getDeleteIcon(rect))
223+
if (this.touchedView.css && this.touchedView.css.deletable) {
224+
this.block.views.push(this.getDeleteIcon(rect))
183225
}
184-
const topBlock = new Pen(this.frontContext, block)
226+
const topBlock = new Pen(this.frontContext, this.block)
185227
topBlock.paint();
186228
},
187229

188-
inArea(x, y, rect, hasTouchedView) {
189-
return (hasTouchedView &&
190-
((x > rect.left &&
191-
y > rect.top &&
192-
x < rect.right &&
193-
y < rect.bottom) ||
194-
(x > rect.right - ACTION_POINT_RADIUS &&
195-
y > rect.bottom - ACTION_POINT_RADIUS &&
196-
x < rect.right + ACTION_POINT_RADIUS &&
197-
y < rect.bottom + ACTION_POINT_RADIUS))
198-
) ||
199-
(x > rect.left &&
200-
y > rect.top &&
201-
x < rect.right &&
202-
y < rect.bottom
203-
)
230+
isInView(x, y, rect) {
231+
return (x > rect.left &&
232+
y > rect.top &&
233+
x < rect.right &&
234+
y < rect.bottom
235+
)
204236
},
205237

206-
isDelete(x, y, rect) {
207-
return (x > rect.left - ACTION_POINT_RADIUS &&
208-
y > rect.top - ACTION_POINT_RADIUS &&
209-
x < rect.left + ACTION_POINT_RADIUS &&
210-
y < rect.top + ACTION_POINT_RADIUS)
238+
isInDelete(x, y) {
239+
for (const view of this.block.views) {
240+
if (view.id === 'delete') {
241+
return (x > view.rect.left &&
242+
y > view.rect.top &&
243+
x < view.rect.right &&
244+
y < view.rect.bottom)
245+
}
246+
}
247+
return false
248+
},
249+
250+
isInScale(x, y) {
251+
for (const view of this.block.views) {
252+
if (view.id === 'scale') {
253+
return (x > view.rect.left &&
254+
y > view.rect.top &&
255+
x < view.rect.right &&
256+
y < view.rect.bottom)
257+
}
258+
}
259+
return false
211260
},
212261

213262
touchedView: {},
@@ -224,13 +273,13 @@ Component({
224273
const {
225274
rect
226275
} = view
227-
if (this.touchedView && this.touchedView.id && this.touchedView.id === view.id && this.isDelete(x, y, rect)) {
276+
if (this.touchedView && this.touchedView.id && this.touchedView.id === view.id && this.isInDelete(x, y, rect)) {
228277
canBeTouched.length = 0
229278
deleteIndex = i
230279
isDelete = true
231280
break
232281
}
233-
if (this.inArea(x, y, rect, !this.isEmpty(this.touchedView))) {
282+
if (this.isInView(x, y, rect)) {
234283
canBeTouched.push({
235284
view,
236285
index: i
@@ -341,7 +390,7 @@ Component({
341390
const {
342391
rect
343392
} = this.touchedView
344-
if (rect.right - ACTION_POINT_RADIUS < x && x < rect.right + ACTION_POINT_RADIUS && rect.bottom - ACTION_POINT_RADIUS < y && y < rect.bottom + ACTION_POINT_RADIUS) {
393+
if (this.isInScale(x, y, rect)) {
345394
this.isScale = true
346395
this.movingCache = {}
347396
this.startH = rect.bottom - rect.top
@@ -355,7 +404,7 @@ Component({
355404
onTouchEnd(e) {
356405
const current = new Date().getTime()
357406
if ((current - this.startTimeStamp) <= 500 && !this.hasMove) {
358-
this.onClick(e)
407+
!this.isScale && this.onClick(e)
359408
} else if (this.touchedView && !this.isEmpty(this.touchedView)) {
360409
this.triggerEvent('touchEnd', {
361410
view: this.touchedView,
@@ -575,10 +624,10 @@ Component({
575624
setTimeout(() => {
576625
wx.canvasToTempFilePath({
577626
canvasId: 'photo',
578-
success: function(res) {
627+
success: function (res) {
579628
that.getImageInfo(res.tempFilePath);
580629
},
581-
fail: function(error) {
630+
fail: function (error) {
582631
console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
583632
that.triggerEvent('imgErr', {
584633
error: error
@@ -652,4 +701,4 @@ function setStringPrototype(screenK, scale) {
652701
}
653702
return res;
654703
};
655-
}
704+
}

‎pages/example/example.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ Page({
1111
*/
1212
data: {
1313
template: {},
14+
customActionStyle: {
15+
border: {
16+
borderColor: 'red',
17+
}
18+
}
1419
},
1520

1621
onImgOK(e) {

‎pages/example/example.wxml

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
<view style='position: relative;'>
2-
<text bind:tap='onRevert'>撤销</text>
3-
<text bind:tap='onRecover'>恢复</text>
4-
<painter customStyle='margin-left: 40rpx; height: 1000rpx;' dancePalette="{{template}}" palette="{{paintPallette}}" bind:imgOK="onImgOK" bind:touchEnd="touchEnd" action="{{action}}"/>
2+
<view class="top">
3+
<button bind:tap='onRevert'>撤销</button>
4+
<button bind:tap='onRecover'>恢复</button>
5+
<button bind:tap='saveImage'>保存</button>
6+
</view>
7+
<painter
8+
customStyle='margin-left: 40rpx; height: 1000rpx;'
9+
customActionStyle="{{customActionStyle}}"
10+
dancePalette="{{template}}"
11+
palette="{{paintPallette}}"
12+
bind:imgOK="onImgOK"
13+
bind:touchEnd="touchEnd"
14+
action="{{action}}"
15+
/>
516
<!-- <image src="{{image}}" style="width: 654rpx; height: 1000rpx; margin-left:40rpx;"/> -->
6-
<button style='position:relative;margin-top:50rpx' bind:tap='saveImage'>保存</button>
17+
718
</view>

‎pages/example/example.wxss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,8 @@
88
display: flex;
99
flex-direction: column;
1010
justify-content: center;
11+
}
12+
13+
.top {
14+
display: flex;
1115
}

‎palette/card.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ export default class LastMayday {
5252
background: '#538e60',
5353
textAlign: 'center',
5454
padding: '10rpx',
55+
scalable: true,
56+
deletable: true,
5557
}, common, { left: '300rpx' }],
5658
},
5759
{

0 commit comments

Comments
 (0)