| | |
| | | class="c-signature-layer" |
| | | title="手写板 / 请书写签名" |
| | | :isOpened="layerOpened" |
| | | :onClose="evt => null" |
| | | :onClose="evt => handleClose()" |
| | | > |
| | | <view class="c-signature-layer-draw"> |
| | | <view class="size-box-top"></view> |
| | |
| | | }; |
| | | }, |
| | | methods: { |
| | | _initDraw() { |
| | | this.canvasContext = Taro.createCanvasContext(this.cavId, this); |
| | | const $container = $(this.$refs.drawing).parent(); |
| | | setTimeout(() => { |
| | | $container.width().then(w => (this.cavWidth = w)); |
| | | $container.height().then(h => (this.cavHeight = h)); |
| | | }, 0); |
| | | }, |
| | | $onDraw(callback) { |
| | | this._initDraw(); |
| | | this.layerOpened = true; |
| | | this._callback = callback; |
| | | this.handleRestDraw(); |
| | | setTimeout(() => { |
| | | this.handleRestDraw(); |
| | | }, 10); |
| | | }, |
| | | handleRestDraw() { |
| | | this.firstTouch = true; |
| | |
| | | this.chirography = []; |
| | | this.canvasContext.clearRect(0, 0, this.cavWidth, this.cavHeight); |
| | | this.canvasContext.draw(); |
| | | }, |
| | | handleClose() { |
| | | this.layerOpened = false; |
| | | }, |
| | | handleWriteStart(evt) { |
| | | if (evt.type != 'touchstart') { |
| | |
| | | point[1].r, |
| | | point[2].x, |
| | | point[2].y, |
| | | point[2].r |
| | | point[2].r, |
| | | ); |
| | | this._bethelDraw(a, true); |
| | | point = [{ x: x, y: y, r: r }]; |
| | |
| | | point[i].c2x, |
| | | point[i].c2y, |
| | | point[i].ex, |
| | | point[i].ey |
| | | point[i].ey, |
| | | ); |
| | | } |
| | | ctx.stroke(); |
| | |
| | | } |
| | | ctx.draw(true); |
| | | }, |
| | | _brushingGround(callback) { |
| | | Taro.canvasToTempFilePath({ |
| | | canvasId: this.cavId, |
| | | x: 0, |
| | | y: 0, |
| | | width: Math.ceil(this.cavWidth), |
| | | height: Math.ceil(this.cavHeight), |
| | | destWidth: Math.ceil(this.cavWidth), |
| | | destHeight: Math.ceil(this.cavHeight), |
| | | quality: 1, |
| | | fileType: 'png', |
| | | success: res => { |
| | | const ctx = this.canvasContext; |
| | | ctx.setFillStyle('#ffffff'); |
| | | ctx.fillRect(0, 0, this.cavWidth, this.cavHeight); |
| | | ctx.drawImage(res.tempFilePath, 0, 0); |
| | | ctx.draw(false, () => { |
| | | callback(); |
| | | }); |
| | | }, |
| | | }); |
| | | }, |
| | | handleSaveDraw() { |
| | | if (this.firstTouch) { |
| | | Tools.toast('请书写签名!'); |
| | | } |
| | | const delta = 20; |
| | | const clipArea = { x: 0, y: 0, w: 0, h: 0 }; |
| | | clipArea.x = Math.max(this.cutArea.left - delta, 0); |
| | | clipArea.y = Math.max(this.cutArea.top - delta, 0); |
| | | const realRight = Math.min(this.cutArea.right + delta, this.cavWidth); |
| | | const realBottom = Math.min(this.cutArea.bottom + delta, this.cavHeight); |
| | | clipArea.w = realRight - clipArea.x; |
| | | clipArea.h = realBottom - clipArea.y; |
| | | Taro.canvasToTempFilePath({ |
| | | canvasId: this.cavId, |
| | | x: clipArea.x, |
| | | y: clipArea.y, |
| | | width: clipArea.w, |
| | | height: clipArea.h, |
| | | destWidth: clipArea.w, |
| | | destHeight: clipArea.h, |
| | | quality: 0.6, |
| | | fileType: 'jpeg', |
| | | success: res => { |
| | | this._callback(res.tempFilePath); |
| | | this.layerOpened = false; |
| | | }, |
| | | this._brushingGround(() => { |
| | | const delta = 20; |
| | | const clipArea = { x: 0, y: 0, w: 0, h: 0 }; |
| | | clipArea.x = Math.max(this.cutArea.left - delta, 0); |
| | | clipArea.y = Math.max(this.cutArea.top - delta, 0); |
| | | const realRight = Math.min(this.cutArea.right + delta, this.cavWidth); |
| | | const realBottom = Math.min(this.cutArea.bottom + delta, this.cavHeight); |
| | | clipArea.w = realRight - clipArea.x; |
| | | clipArea.h = realBottom - clipArea.y; |
| | | Taro.canvasToTempFilePath({ |
| | | canvasId: this.cavId, |
| | | x: clipArea.x, |
| | | y: clipArea.y, |
| | | width: clipArea.w, |
| | | height: clipArea.h, |
| | | destWidth: clipArea.w, |
| | | destHeight: clipArea.h, |
| | | quality: 0.6, |
| | | fileType: 'jpeg', |
| | | success: res => { |
| | | this._callback(res.tempFilePath); |
| | | this.layerOpened = false; |
| | | }, |
| | | }); |
| | | }); |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | this.canvasContext = Taro.createCanvasContext(this.cavId, this); |
| | | const $container = $(this.$refs.drawing).parent(); |
| | | setTimeout(() => { |
| | | $container.width().then(w => (this.cavWidth = w)); |
| | | $container.height().then(h => (this.cavHeight = h)); |
| | | }, 0); |
| | | this._initDraw(); |
| | | }); |
| | | }, |
| | | }; |