|
|
@@ -8,8 +8,7 @@
|
|
|
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifdef APP-NVUE -->
|
|
|
- <web-view :style="size" ref="webview"
|
|
|
- src="/uni_modules/lime-painter/hybrid/html/index.html"
|
|
|
+ <web-view :style="size" ref="webview" src="/uni_modules/lime-painter/hybrid/html/index.html"
|
|
|
class="lime-painter__canvas" @pagefinish="onPageFinish" @error="onError" @onPostMessage="onMessage">
|
|
|
</web-view>
|
|
|
<!-- #endif -->
|
|
|
@@ -19,443 +18,443 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { parent } from '../common/relation'
|
|
|
- import props from './props'
|
|
|
- import {toPx, base64ToPath, pathToBase64, isBase64, sleep, getImageInfo }from './utils';
|
|
|
- // #ifndef APP-NVUE
|
|
|
- import { canIUseCanvas2d, isPC} from './utils';
|
|
|
- import Painter from './painter';
|
|
|
- // import Painter from '@painter'
|
|
|
- const nvue = {}
|
|
|
- // #endif
|
|
|
- // #ifdef APP-NVUE
|
|
|
- import nvue from './nvue'
|
|
|
- // #endif
|
|
|
- export default {
|
|
|
- name: 'lime-painter',
|
|
|
- mixins: [props, parent('painter'), nvue],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- use2dCanvas: false,
|
|
|
- canvasHeight: 150,
|
|
|
- canvasWidth: null,
|
|
|
- parentWidth: 0,
|
|
|
- inited: false,
|
|
|
- progress: 0,
|
|
|
- firstRender: 0,
|
|
|
- done: false,
|
|
|
- tasks: []
|
|
|
- };
|
|
|
+import { parent } from '../common/relation'
|
|
|
+import props from './props'
|
|
|
+import { toPx, base64ToPath, pathToBase64, isBase64, sleep, getImageInfo } from './utils';
|
|
|
+// #ifndef APP-NVUE
|
|
|
+import { canIUseCanvas2d, isPC } from './utils';
|
|
|
+import Painter from './painter';
|
|
|
+// import Painter from '@painter'
|
|
|
+const nvue = {}
|
|
|
+// #endif
|
|
|
+// #ifdef APP-NVUE
|
|
|
+import nvue from './nvue'
|
|
|
+// #endif
|
|
|
+export default {
|
|
|
+ name: 'lime-painter',
|
|
|
+ mixins: [props, parent('painter'), nvue],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ use2dCanvas: false,
|
|
|
+ canvasHeight: 150,
|
|
|
+ canvasWidth: null,
|
|
|
+ parentWidth: 0,
|
|
|
+ inited: false,
|
|
|
+ progress: 0,
|
|
|
+ firstRender: 0,
|
|
|
+ done: false,
|
|
|
+ tasks: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ styles() {
|
|
|
+ return `${this.size}${this.customStyle || ''};` + (this.hidden && 'position: fixed; left: 1500rpx;')
|
|
|
},
|
|
|
- computed: {
|
|
|
- styles() {
|
|
|
- return `${this.size}${this.customStyle||''};` + (this.hidden && 'position: fixed; left: 1500rpx;')
|
|
|
- },
|
|
|
- canvasId() {
|
|
|
- return `l-painter${this._ && this._.uid || this._uid}`
|
|
|
- },
|
|
|
- size() {
|
|
|
- if (this.boardWidth && this.boardHeight) {
|
|
|
- return `width:${this.boardWidth}px; height: ${this.boardHeight}px;`;
|
|
|
- }
|
|
|
- },
|
|
|
- dpr() {
|
|
|
- return this.pixelRatio || uni.getSystemInfoSync().pixelRatio;
|
|
|
- },
|
|
|
- boardWidth() {
|
|
|
- const {width = 0} = (this.elements && this.elements.css) || this.elements || this
|
|
|
- const w = toPx(width||this.width)
|
|
|
- return w || Math.max(w, toPx(this.canvasWidth));
|
|
|
- },
|
|
|
- boardHeight() {
|
|
|
- const {height = 0} = (this.elements && this.elements.css) || this.elements || this
|
|
|
- const h = toPx(height||this.height)
|
|
|
- return h || Math.max(h, toPx(this.canvasHeight));
|
|
|
- },
|
|
|
- hasBoard() {
|
|
|
- return this.board && Object.keys(this.board).length
|
|
|
- },
|
|
|
- elements() {
|
|
|
- return this.hasBoard ? this.board : JSON.parse(JSON.stringify(this.el))
|
|
|
+ canvasId() {
|
|
|
+ return `l-painter${this._ && this._.uid || this._uid}`
|
|
|
+ },
|
|
|
+ size() {
|
|
|
+ if (this.boardWidth && this.boardHeight) {
|
|
|
+ return `width:${this.boardWidth}px; height: ${this.boardHeight}px;`;
|
|
|
}
|
|
|
},
|
|
|
- created() {
|
|
|
- this.use2dCanvas = this.type === '2d' && canIUseCanvas2d() && !isPC
|
|
|
+ dpr() {
|
|
|
+ return this.pixelRatio || uni.getSystemInfoSync().pixelRatio;
|
|
|
},
|
|
|
- async mounted() {
|
|
|
- await sleep(30)
|
|
|
- await this.getParentWeith()
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- this.$watch('elements', this.watchRender, {
|
|
|
- deep: true,
|
|
|
- immediate: true
|
|
|
- });
|
|
|
- }, 30)
|
|
|
- })
|
|
|
+ boardWidth() {
|
|
|
+ const { width = 0 } = (this.elements && this.elements.css) || this.elements || this
|
|
|
+ const w = toPx(width || this.width)
|
|
|
+ return w || Math.max(w, toPx(this.canvasWidth));
|
|
|
},
|
|
|
- // #ifdef VUE3
|
|
|
- unmounted() {
|
|
|
- this.done = false
|
|
|
- this.inited = false
|
|
|
- this.firstRender = 0
|
|
|
- this.progress = 0
|
|
|
- this.painter = null
|
|
|
- clearTimeout(this.rendertimer)
|
|
|
+ boardHeight() {
|
|
|
+ const { height = 0 } = (this.elements && this.elements.css) || this.elements || this
|
|
|
+ const h = toPx(height || this.height)
|
|
|
+ return h || Math.max(h, toPx(this.canvasHeight));
|
|
|
},
|
|
|
- // #endif
|
|
|
- // #ifdef VUE2
|
|
|
- destroyed() {
|
|
|
- this.done = false
|
|
|
- this.inited = false
|
|
|
- this.firstRender = 0
|
|
|
+ hasBoard() {
|
|
|
+ return this.board && Object.keys(this.board).length
|
|
|
+ },
|
|
|
+ elements() {
|
|
|
+ return this.hasBoard ? this.board : JSON.parse(JSON.stringify(this.el))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.use2dCanvas = this.type === '2d' && canIUseCanvas2d() && !isPC
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ await sleep(30)
|
|
|
+ await this.getParentWeith()
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$watch('elements', this.watchRender, {
|
|
|
+ deep: true,
|
|
|
+ immediate: true
|
|
|
+ });
|
|
|
+ }, 30)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // #ifdef VUE3
|
|
|
+ unmounted() {
|
|
|
+ this.done = false
|
|
|
+ this.inited = false
|
|
|
+ this.firstRender = 0
|
|
|
+ this.progress = 0
|
|
|
+ this.painter = null
|
|
|
+ clearTimeout(this.rendertimer)
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ // #ifdef VUE2
|
|
|
+ destroyed() {
|
|
|
+ this.done = false
|
|
|
+ this.inited = false
|
|
|
+ this.firstRender = 0
|
|
|
+ this.progress = 0
|
|
|
+ this.painter = null
|
|
|
+ clearTimeout(this.rendertimer)
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ methods: {
|
|
|
+ async watchRender(val, old) {
|
|
|
+ if (!val || !val.views || (!this.firstRender ? !val.views.length : !this.firstRender) || !Object.keys(val).length || JSON.stringify(val) == JSON.stringify(old)) return;
|
|
|
+ this.firstRender = 1
|
|
|
this.progress = 0
|
|
|
- this.painter = null
|
|
|
+ this.done = false
|
|
|
clearTimeout(this.rendertimer)
|
|
|
+ this.rendertimer = setTimeout(() => {
|
|
|
+ this.render(val);
|
|
|
+ }, this.beforeDelay)
|
|
|
},
|
|
|
- // #endif
|
|
|
- methods: {
|
|
|
- async watchRender(val, old) {
|
|
|
- if (!val || !val.views || (!this.firstRender ? !val.views.length : !this.firstRender) || !Object.keys(val).length || JSON.stringify(val) == JSON.stringify(old)) return;
|
|
|
- this.firstRender = 1
|
|
|
- this.progress = 0
|
|
|
- this.done = false
|
|
|
- clearTimeout(this.rendertimer)
|
|
|
- this.rendertimer = setTimeout(() => {
|
|
|
- this.render(val);
|
|
|
- }, this.beforeDelay)
|
|
|
- },
|
|
|
- async setFilePath(path, param) {
|
|
|
- let filePath = path
|
|
|
- const {pathType = this.pathType} = param || this
|
|
|
- if (pathType == 'base64' && !isBase64(path)) {
|
|
|
- filePath = await pathToBase64(path)
|
|
|
- } else if (pathType == 'url' && isBase64(path)) {
|
|
|
- filePath = await base64ToPath(path)
|
|
|
- }
|
|
|
- if (param && param.isEmit) {
|
|
|
- this.$emit('success', filePath);
|
|
|
- }
|
|
|
- return filePath
|
|
|
- },
|
|
|
- async getSize(args) {
|
|
|
- const {width} = args.css || args
|
|
|
- const {height} = args.css || args
|
|
|
- if (!this.size) {
|
|
|
- if (width || height) {
|
|
|
- this.canvasWidth = width || this.canvasWidth
|
|
|
- this.canvasHeight = height || this.canvasHeight
|
|
|
- await sleep(30);
|
|
|
- } else {
|
|
|
- await this.getParentWeith()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- canvasToTempFilePathSync(args) {
|
|
|
- // this.stopWatch && this.stopWatch()
|
|
|
- // this.stopWatch = this.$watch('done', (v) => {
|
|
|
- // if (v) {
|
|
|
- // this.canvasToTempFilePath(args)
|
|
|
- // this.stopWatch && this.stopWatch()
|
|
|
- // }
|
|
|
- // }, {
|
|
|
- // immediate: true
|
|
|
- // })
|
|
|
- this.tasks.push(args)
|
|
|
- if(this.done){
|
|
|
- this.runTask()
|
|
|
- }
|
|
|
- },
|
|
|
- runTask(){
|
|
|
- while(this.tasks.length){
|
|
|
- const task = this.tasks.shift()
|
|
|
- this.canvasToTempFilePath(task)
|
|
|
+ async setFilePath(path, param) {
|
|
|
+ let filePath = path
|
|
|
+ const { pathType = this.pathType } = param || this
|
|
|
+ if (pathType == 'base64' && !isBase64(path)) {
|
|
|
+ filePath = await pathToBase64(path)
|
|
|
+ } else if (pathType == 'url' && isBase64(path)) {
|
|
|
+ filePath = await base64ToPath(path)
|
|
|
+ }
|
|
|
+ if (param && param.isEmit) {
|
|
|
+ this.$emit('success', filePath);
|
|
|
+ }
|
|
|
+ return filePath
|
|
|
+ },
|
|
|
+ async getSize(args) {
|
|
|
+ const { width } = args.css || args
|
|
|
+ const { height } = args.css || args
|
|
|
+ if (!this.size) {
|
|
|
+ if (width || height) {
|
|
|
+ this.canvasWidth = width || this.canvasWidth
|
|
|
+ this.canvasHeight = height || this.canvasHeight
|
|
|
+ await sleep(30);
|
|
|
+ } else {
|
|
|
+ await this.getParentWeith()
|
|
|
}
|
|
|
- },
|
|
|
- // #ifndef APP-NVUE
|
|
|
- getParentWeith() {
|
|
|
- return new Promise(resolve => {
|
|
|
- uni.createSelectorQuery()
|
|
|
- .in(this)
|
|
|
- .select(`.lime-painter`)
|
|
|
- .boundingClientRect()
|
|
|
- .exec(res => {
|
|
|
- const {width, height} = res[0]||{}
|
|
|
- this.parentWidth = Math.ceil(width||0)
|
|
|
- this.canvasWidth = this.parentWidth || 300
|
|
|
- this.canvasHeight = height || this.canvasHeight||150
|
|
|
- resolve(res[0])
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- async render(args = {}) {
|
|
|
- if(!Object.keys(args).length) {
|
|
|
- return console.error('空对象')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ canvasToTempFilePathSync(args) {
|
|
|
+ // this.stopWatch && this.stopWatch()
|
|
|
+ // this.stopWatch = this.$watch('done', (v) => {
|
|
|
+ // if (v) {
|
|
|
+ // this.canvasToTempFilePath(args)
|
|
|
+ // this.stopWatch && this.stopWatch()
|
|
|
+ // }
|
|
|
+ // }, {
|
|
|
+ // immediate: true
|
|
|
+ // })
|
|
|
+ this.tasks.push(args)
|
|
|
+ if (this.done) {
|
|
|
+ this.runTask()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ runTask() {
|
|
|
+ while (this.tasks.length) {
|
|
|
+ const task = this.tasks.shift()
|
|
|
+ this.canvasToTempFilePath(task)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // #ifndef APP-NVUE
|
|
|
+ getParentWeith() {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .in(this)
|
|
|
+ .select(`.lime-painter`)
|
|
|
+ .boundingClientRect()
|
|
|
+ .exec(res => {
|
|
|
+ const { width, height } = res[0] || {}
|
|
|
+ this.parentWidth = Math.ceil(width || 0)
|
|
|
+ this.canvasWidth = this.parentWidth || 300
|
|
|
+ this.canvasHeight = height || this.canvasHeight || 150
|
|
|
+ resolve(res[0])
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async render(args = {}) {
|
|
|
+ if (!Object.keys(args).length) {
|
|
|
+ return console.error('空对象')
|
|
|
+ }
|
|
|
+ this.progress = 0
|
|
|
+ this.done = false
|
|
|
+ // #ifdef APP-NVUE
|
|
|
+ this.tempFilePath.length = 0
|
|
|
+ // #endif
|
|
|
+ await this.getSize(args)
|
|
|
+ const ctx = await this.getContext();
|
|
|
+
|
|
|
+ let {
|
|
|
+ use2dCanvas,
|
|
|
+ boardWidth,
|
|
|
+ boardHeight,
|
|
|
+ canvas,
|
|
|
+ afterDelay
|
|
|
+ } = this;
|
|
|
+ if (use2dCanvas && !canvas) {
|
|
|
+ return Promise.reject(new Error('canvas 没创建'));
|
|
|
+ }
|
|
|
+ this.boundary = {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ width: boardWidth,
|
|
|
+ height: boardHeight
|
|
|
+ };
|
|
|
+ this.painter = null
|
|
|
+ if (!this.painter) {
|
|
|
+ const { width } = args.css || args
|
|
|
+ const { height } = args.css || args
|
|
|
+ if (!width && this.parentWidth) {
|
|
|
+ Object.assign(args, { width: this.parentWidth })
|
|
|
}
|
|
|
- this.progress = 0
|
|
|
- this.done = false
|
|
|
- // #ifdef APP-NVUE
|
|
|
- this.tempFilePath.length = 0
|
|
|
- // #endif
|
|
|
- await this.getSize(args)
|
|
|
- const ctx = await this.getContext();
|
|
|
-
|
|
|
- let {
|
|
|
- use2dCanvas,
|
|
|
- boardWidth,
|
|
|
- boardHeight,
|
|
|
+ const param = {
|
|
|
+ context: ctx,
|
|
|
canvas,
|
|
|
- afterDelay
|
|
|
- } = this;
|
|
|
- if (use2dCanvas && !canvas) {
|
|
|
- return Promise.reject(new Error('canvas 没创建'));
|
|
|
- }
|
|
|
- this.boundary = {
|
|
|
- top: 0,
|
|
|
- left: 0,
|
|
|
width: boardWidth,
|
|
|
- height: boardHeight
|
|
|
- };
|
|
|
- this.painter = null
|
|
|
- if (!this.painter) {
|
|
|
- const {width} = args.css || args
|
|
|
- const {height} = args.css || args
|
|
|
- if(!width && this.parentWidth) {
|
|
|
- Object.assign(args, {width: this.parentWidth})
|
|
|
- }
|
|
|
- const param = {
|
|
|
- context: ctx,
|
|
|
- canvas,
|
|
|
- width: boardWidth,
|
|
|
- height: boardHeight,
|
|
|
- pixelRatio: this.dpr,
|
|
|
- useCORS: this.useCORS,
|
|
|
- createImage: getImageInfo.bind(this),
|
|
|
- performance: this.performance,
|
|
|
- listen: {
|
|
|
- onProgress: (v) => {
|
|
|
- this.progress = v
|
|
|
- this.$emit('progress', v)
|
|
|
- },
|
|
|
- onEffectFail: (err) => {
|
|
|
- this.$emit('faill', err)
|
|
|
- }
|
|
|
+ height: boardHeight,
|
|
|
+ pixelRatio: this.dpr,
|
|
|
+ useCORS: this.useCORS,
|
|
|
+ createImage: getImageInfo.bind(this),
|
|
|
+ performance: this.performance,
|
|
|
+ listen: {
|
|
|
+ onProgress: (v) => {
|
|
|
+ this.progress = v
|
|
|
+ this.$emit('progress', v)
|
|
|
+ },
|
|
|
+ onEffectFail: (err) => {
|
|
|
+ this.$emit('faill', err)
|
|
|
}
|
|
|
}
|
|
|
- this.painter = new Painter(param)
|
|
|
- }
|
|
|
- try{
|
|
|
- // vue3 赋值给data会引起图片无法绘制
|
|
|
- const { width, height } = await this.painter.source(JSON.parse(JSON.stringify(args)))
|
|
|
- this.boundary.height = this.canvasHeight = height
|
|
|
- this.boundary.width = this.canvasWidth = width
|
|
|
- await sleep(this.sleep);
|
|
|
- await this.painter.render()
|
|
|
- await new Promise(resolve => this.$nextTick(resolve));
|
|
|
- if (!use2dCanvas) {
|
|
|
- await this.canvasDraw();
|
|
|
- }
|
|
|
- if (afterDelay && use2dCanvas) {
|
|
|
- await sleep(afterDelay);
|
|
|
- }
|
|
|
- this.$emit('done');
|
|
|
- this.done = true
|
|
|
- if (this.isCanvasToTempFilePath) {
|
|
|
- this.canvasToTempFilePath()
|
|
|
- .then(res => {
|
|
|
- this.$emit('success', res.tempFilePath)
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- this.$emit('fail', new Error(JSON.stringify(err)));
|
|
|
- });
|
|
|
- }
|
|
|
- this.runTask()
|
|
|
- return Promise.resolve({
|
|
|
- ctx,
|
|
|
- draw: this.painter,
|
|
|
- node: this.node
|
|
|
- });
|
|
|
- }catch(e){
|
|
|
- //TODO handle the exception
|
|
|
}
|
|
|
-
|
|
|
- },
|
|
|
- canvasDraw(flag = false) {
|
|
|
- return new Promise((resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this
|
|
|
- .afterDelay)));
|
|
|
- },
|
|
|
- async getContext() {
|
|
|
- if (!this.canvasWidth) {
|
|
|
- this.$emit('fail', 'painter no size')
|
|
|
- console.error('[lime-painter]: 给画板或父级设置尺寸')
|
|
|
- return Promise.reject();
|
|
|
+ this.painter = new Painter(param)
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ // vue3 赋值给data会引起图片无法绘制
|
|
|
+ const { width, height } = await this.painter.source(JSON.parse(JSON.stringify(args)))
|
|
|
+ this.boundary.height = this.canvasHeight = height
|
|
|
+ this.boundary.width = this.canvasWidth = width
|
|
|
+ await sleep(this.sleep);
|
|
|
+ await this.painter.render()
|
|
|
+ await new Promise(resolve => this.$nextTick(resolve));
|
|
|
+ if (!use2dCanvas) {
|
|
|
+ await this.canvasDraw();
|
|
|
}
|
|
|
- if (this.ctx && this.inited) {
|
|
|
- return Promise.resolve(this.ctx);
|
|
|
+ if (afterDelay && use2dCanvas) {
|
|
|
+ await sleep(afterDelay);
|
|
|
}
|
|
|
- const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
|
|
|
- const _getContext = () => {
|
|
|
- return new Promise(resolve => {
|
|
|
- uni.createSelectorQuery()
|
|
|
- .in(this)
|
|
|
- .select(`#${this.canvasId}`)
|
|
|
- .boundingClientRect()
|
|
|
- .exec(res => {
|
|
|
- if (res) {
|
|
|
- const ctx = uni.createCanvasContext(this.canvasId, this);
|
|
|
- if (!this.inited) {
|
|
|
- this.inited = true;
|
|
|
- this.use2dCanvas = false;
|
|
|
- this.canvas = res;
|
|
|
- }
|
|
|
-
|
|
|
- // 钉钉小程序框架不支持 measureText 方法，用此方法 mock
|
|
|
- if (!ctx.measureText) {
|
|
|
- function strLen(str) {
|
|
|
- let len = 0;
|
|
|
- for (let i = 0; i < str.length; i++) {
|
|
|
- if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
|
|
- len++;
|
|
|
- } else {
|
|
|
- len += 2;
|
|
|
- }
|
|
|
- }
|
|
|
- return len;
|
|
|
- }
|
|
|
- ctx.measureText = text => {
|
|
|
- let fontSize = ctx.state && ctx.state.fontSize || 12;
|
|
|
- const font = ctx.__font
|
|
|
- if (font && fontSize == 12) {
|
|
|
- fontSize = parseInt(font.split(' ')[3], 10);
|
|
|
- }
|
|
|
- fontSize /= 2;
|
|
|
- return {
|
|
|
- width: strLen(text) * fontSize
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // #ifdef MP-ALIPAY
|
|
|
- ctx.scale(dpr, dpr);
|
|
|
- // #endif
|
|
|
- this.ctx = ctx
|
|
|
- resolve(this.ctx);
|
|
|
- } else {
|
|
|
- console.error('[lime-painter] no node')
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- };
|
|
|
- if (!use2dCanvas) {
|
|
|
- return _getContext();
|
|
|
+ this.$emit('done');
|
|
|
+ this.done = true
|
|
|
+ if (this.isCanvasToTempFilePath) {
|
|
|
+ this.canvasToTempFilePath()
|
|
|
+ .then(res => {
|
|
|
+ this.$emit('success', res.tempFilePath)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$emit('fail', new Error(JSON.stringify(err)));
|
|
|
+ });
|
|
|
}
|
|
|
+ this.runTask()
|
|
|
+ return Promise.resolve({
|
|
|
+ ctx,
|
|
|
+ draw: this.painter,
|
|
|
+ node: this.node
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ //TODO handle the exception
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ canvasDraw(flag = false) {
|
|
|
+ return new Promise((resolve, reject) => this.ctx.draw(flag, () => setTimeout(() => resolve(), this
|
|
|
+ .afterDelay)));
|
|
|
+ },
|
|
|
+ async getContext() {
|
|
|
+ if (!this.canvasWidth) {
|
|
|
+ this.$emit('fail', 'painter no size')
|
|
|
+ console.error('[lime-painter]: 给画板或父级设置尺寸')
|
|
|
+ return Promise.reject();
|
|
|
+ }
|
|
|
+ if (this.ctx && this.inited) {
|
|
|
+ return Promise.resolve(this.ctx);
|
|
|
+ }
|
|
|
+ const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
|
|
|
+ const _getContext = () => {
|
|
|
return new Promise(resolve => {
|
|
|
uni.createSelectorQuery()
|
|
|
.in(this)
|
|
|
.select(`#${this.canvasId}`)
|
|
|
- .node()
|
|
|
+ .boundingClientRect()
|
|
|
.exec(res => {
|
|
|
- let {node: canvas} = res && res[0]||{};
|
|
|
- if(canvas) {
|
|
|
- const ctx = canvas.getContext(type);
|
|
|
+ if (res) {
|
|
|
+ const ctx = uni.createCanvasContext(this.canvasId, this);
|
|
|
if (!this.inited) {
|
|
|
this.inited = true;
|
|
|
- this.use2dCanvas = true;
|
|
|
- this.canvas = canvas;
|
|
|
+ this.use2dCanvas = false;
|
|
|
+ this.canvas = res;
|
|
|
}
|
|
|
+
|
|
|
+ // 钉钉小程序框架不支持 measureText 方法，用此方法 mock
|
|
|
+ if (!ctx.measureText) {
|
|
|
+ function strLen(str) {
|
|
|
+ let len = 0;
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
+ if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
|
|
+ len++;
|
|
|
+ } else {
|
|
|
+ len += 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return len;
|
|
|
+ }
|
|
|
+ ctx.measureText = text => {
|
|
|
+ let fontSize = ctx.state && ctx.state.fontSize || 12;
|
|
|
+ const font = ctx.__font
|
|
|
+ if (font && fontSize == 12) {
|
|
|
+ fontSize = parseInt(font.split(' ')[3], 10);
|
|
|
+ }
|
|
|
+ fontSize /= 2;
|
|
|
+ return {
|
|
|
+ width: strLen(text) * fontSize
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // #ifdef MP-ALIPAY
|
|
|
+ ctx.scale(dpr, dpr);
|
|
|
+ // #endif
|
|
|
this.ctx = ctx
|
|
|
resolve(this.ctx);
|
|
|
} else {
|
|
|
- console.error('[lime-painter]: no size')
|
|
|
+ console.error('[lime-painter] no node')
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
- },
|
|
|
- canvasToTempFilePath(args = {}) {
|
|
|
- return new Promise(async (resolve, reject) => {
|
|
|
- const { use2dCanvas, canvasId, dpr, fileType, quality } = this;
|
|
|
- const success = async (res) => {
|
|
|
- try {
|
|
|
- const tempFilePath = await this.setFilePath(res.tempFilePath || res, args)
|
|
|
- const result = Object.assign(res, {tempFilePath})
|
|
|
- args.success && args.success(result)
|
|
|
- resolve(result)
|
|
|
- } catch (e) {
|
|
|
- this.$emit('fail', e)
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let { top: y = 0, left: x = 0, width, height } = this.boundary || this;
|
|
|
- // let destWidth = width * dpr;
|
|
|
- // let destHeight = height * dpr;
|
|
|
- // #ifdef MP-ALIPAY
|
|
|
- // width = destWidth;
|
|
|
- // height = destHeight;
|
|
|
- // #endif
|
|
|
-
|
|
|
- const copyArgs = Object.assign({
|
|
|
- // x,
|
|
|
- // y,
|
|
|
- // width,
|
|
|
- // height,
|
|
|
- // destWidth,
|
|
|
- // destHeight,
|
|
|
- canvasId,
|
|
|
- id: canvasId,
|
|
|
- fileType,
|
|
|
- quality,
|
|
|
- }, args, {success});
|
|
|
- // if(this.isPC || use2dCanvas) {
|
|
|
- // copyArgs.canvas = this.canvas
|
|
|
- // }
|
|
|
- if (use2dCanvas) {
|
|
|
- copyArgs.canvas = this.canvas
|
|
|
- try{
|
|
|
- // #ifndef MP-ALIPAY
|
|
|
- const oFilePath = this.canvas.toDataURL(`image/${args.fileType||fileType}`.replace(/pg/, 'peg'), args.quality||quality)
|
|
|
- if(/data:,/.test(oFilePath)) {
|
|
|
- uni.canvasToTempFilePath(copyArgs, this);
|
|
|
- } else {
|
|
|
- const tempFilePath = await this.setFilePath(oFilePath, args)
|
|
|
- args.success && args.success({tempFilePath})
|
|
|
- resolve({tempFilePath})
|
|
|
+ };
|
|
|
+ if (!use2dCanvas) {
|
|
|
+ return _getContext();
|
|
|
+ }
|
|
|
+ return new Promise(resolve => {
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .in(this)
|
|
|
+ .select(`#${this.canvasId}`)
|
|
|
+ .node()
|
|
|
+ .exec(res => {
|
|
|
+ let { node: canvas } = res && res[0] || {};
|
|
|
+ if (canvas) {
|
|
|
+ const ctx = canvas.getContext(type);
|
|
|
+ if (!this.inited) {
|
|
|
+ this.inited = true;
|
|
|
+ this.use2dCanvas = true;
|
|
|
+ this.canvas = canvas;
|
|
|
}
|
|
|
- // #endif
|
|
|
- // #ifdef MP-ALIPAY
|
|
|
- this.canvas.toTempFilePath(copyArgs)
|
|
|
- // #endif
|
|
|
- }catch(e){
|
|
|
- args.fail && args.fail(e)
|
|
|
- reject(e)
|
|
|
+ this.ctx = ctx
|
|
|
+ resolve(this.ctx);
|
|
|
+ } else {
|
|
|
+ console.error('[lime-painter]: no size')
|
|
|
}
|
|
|
- } else {
|
|
|
- // #ifdef MP-ALIPAY
|
|
|
- if(this.ctx.toTempFilePath) {
|
|
|
- // 钉钉
|
|
|
- const ctx = uni.createCanvasContext(canvasId);
|
|
|
- ctx.toTempFilePath(copyArgs);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ canvasToTempFilePath(args = {}) {
|
|
|
+ return new Promise(async (resolve, reject) => {
|
|
|
+ const { use2dCanvas, canvasId, dpr, fileType, quality } = this;
|
|
|
+ const success = async (res) => {
|
|
|
+ try {
|
|
|
+ const tempFilePath = await this.setFilePath(res.tempFilePath || res, args)
|
|
|
+ const result = Object.assign(res, { tempFilePath })
|
|
|
+ args.success && args.success(result)
|
|
|
+ resolve(result)
|
|
|
+ } catch (e) {
|
|
|
+ this.$emit('fail', e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let { top: y = 0, left: x = 0, width, height } = this.boundary || this;
|
|
|
+ // let destWidth = width * dpr;
|
|
|
+ // let destHeight = height * dpr;
|
|
|
+ // #ifdef MP-ALIPAY
|
|
|
+ // width = destWidth;
|
|
|
+ // height = destHeight;
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ const copyArgs = Object.assign({
|
|
|
+ // x,
|
|
|
+ // y,
|
|
|
+ // width,
|
|
|
+ // height,
|
|
|
+ // destWidth,
|
|
|
+ // destHeight,
|
|
|
+ canvasId,
|
|
|
+ id: canvasId,
|
|
|
+ fileType,
|
|
|
+ quality,
|
|
|
+ }, args, { success });
|
|
|
+ // if(this.isPC || use2dCanvas) {
|
|
|
+ // copyArgs.canvas = this.canvas
|
|
|
+ // }
|
|
|
+ if (use2dCanvas) {
|
|
|
+ copyArgs.canvas = this.canvas
|
|
|
+ try {
|
|
|
+ // #ifndef MP-ALIPAY
|
|
|
+ const oFilePath = this.canvas.toDataURL(`image/${args.fileType || fileType}`.replace(/pg/, 'peg'), args.quality || quality)
|
|
|
+ if (/data:,/.test(oFilePath)) {
|
|
|
+ uni.canvasToTempFilePath(copyArgs, this);
|
|
|
} else {
|
|
|
- my.canvasToTempFilePath(copyArgs);
|
|
|
+ const tempFilePath = await this.setFilePath(oFilePath, args)
|
|
|
+ args.success && args.success({ tempFilePath })
|
|
|
+ resolve({ tempFilePath })
|
|
|
}
|
|
|
// #endif
|
|
|
- // #ifndef MP-ALIPAY
|
|
|
- uni.canvasToTempFilePath(copyArgs, this);
|
|
|
+ // #ifdef MP-ALIPAY
|
|
|
+ this.canvas.toTempFilePath(copyArgs)
|
|
|
// #endif
|
|
|
+ } catch (e) {
|
|
|
+ args.fail && args.fail(e)
|
|
|
+ reject(e)
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- // #endif
|
|
|
+ } else {
|
|
|
+ // #ifdef MP-ALIPAY
|
|
|
+ if (this.ctx.toTempFilePath) {
|
|
|
+ // 钉钉
|
|
|
+ const ctx = uni.createCanvasContext(canvasId);
|
|
|
+ ctx.toTempFilePath(copyArgs);
|
|
|
+ } else {
|
|
|
+ my.canvasToTempFilePath(copyArgs);
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ // #ifndef MP-ALIPAY
|
|
|
+ uni.canvasToTempFilePath(copyArgs, this);
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- };
|
|
|
-</script>
|
|
|
-<style>
|
|
|
- .lime-painter,
|
|
|
- .lime-painter__canvas {
|
|
|
- // #ifndef APP-NVUE
|
|
|
- width: 100%;
|
|
|
- // #endif
|
|
|
- // #ifdef APP-NVUE
|
|
|
- flex: 1;
|
|
|
// #endif
|
|
|
}
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.lime-painter,
|
|
|
+.lime-painter__canvas {
|
|
|
+ // #ifndef APP-NVUE
|
|
|
+ width: 100%;
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-NVUE
|
|
|
+ flex: 1;
|
|
|
+ // #endif
|
|
|
+}
|
|
|
</style>
|
