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

fix: 解决多次绘制导致的尺寸问题

Browse Source
This commit is contained in:
0JARVIS0 2020-10-20 17:58:42 +08:00
parent 301d7d4a15
commit 1a6a08395c
2 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
painter.js
View File

@ -668,19 +668,33 @@ Component({
return; return;
} }
let needScale = false;
// 生成图片时，根据设置的像素值重新绘制 // 生成图片时，根据设置的像素值重新绘制
this.canvasWidthInPx = width.toPx(); if (width.toPx() !== this.canvasWidthInPx) {
this.canvasWidthInPx = width.toPx();
needScale = this.properties.use2D;
}
if (this.properties.widthPixels) { if (this.properties.widthPixels) {
setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx) setStringPrototype(this.screenK, this.properties.widthPixels / this.canvasWidthInPx)
this.canvasWidthInPx = this.properties.widthPixels this.canvasWidthInPx = this.properties.widthPixels
} }
this.canvasHeightInPx = height.toPx(); 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;`, photoStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
}); });
this.photoContext || (this.photoContext = await this.getCanvasContext(this.properties.use2D, 'photo')); if (!this.photoContext) {
this.photoContext = await this.getCanvasContext(this.properties.use2D, 'photo');
}
if (needScale) {
const scale = getApp().systemInfo.pixelRatio;
this.photoContext.width = this.canvasWidthInPx * scale;
this.photoContext.height = this.canvasHeightInPx * scale;
this.photoContext.scale(scale, scale);
}
new Pen(this.photoContext, palette).paint(() => { new Pen(this.photoContext, palette).paint(() => {
this.saveImgToLocal(); this.saveImgToLocal();
}); });
@ -784,10 +798,6 @@ Component({
that.canvasNode = res[0].node; that.canvasNode = res[0].node;
const ctx = that.canvasNode.getContext('2d'); const ctx = that.canvasNode.getContext('2d');
const wxCanvas = new WxCanvas('2d', ctx, id, true, that.canvasNode); const wxCanvas = new WxCanvas('2d', ctx, id, true, that.canvasNode);
const dpr = Math.min(2, getApp().systemInfo.pixelRatio)
wxCanvas.width = res[0].width * dpr
wxCanvas.height = res[0].height * dpr
wxCanvas.scale(dpr, dpr)
resolve(wxCanvas); resolve(wxCanvas);
}); });
} else { } else {

6
painter.wxml
View File

@ -14,8 +14,8 @@
disable-scroll="{{true}}" /> disable-scroll="{{true}}" />
</block> </block>
<block wx:if="{{use2D}}"> <block wx:if="{{use2D}}">
<canvas type="2d" id="photo" style="{{photoStyle}};position: absolute; left: -9999px; top: -9999rpx;" /> <canvas type="2d" id="photo" style="{{photoStyle}};" />
<canvas type="2d" id="bottom" style="{{painterStyle}};position: absolute;" /> <!-- <canvas type="2d" id="bottom" style="{{painterStyle}};position: absolute;" />
<canvas type="2d" id="k-canvas" 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="top" style="{{painterStyle}};position: absolute;" />
<canvas <canvas
@ -26,6 +26,6 @@
bindtouchmove="onTouchMove" bindtouchmove="onTouchMove"
bindtouchend="onTouchEnd" bindtouchend="onTouchEnd"
bindtouchcancel="onTouchCancel" bindtouchcancel="onTouchCancel"
disable-scroll="{{true}}" /> disable-scroll="{{true}}" /> -->
</block> </block>
</view> </view>