diff --git a/src/components/AiDrawer.vue b/src/components/AiDrawer.vue index 732d7284..ad3da7ea 100644 --- a/src/components/AiDrawer.vue +++ b/src/components/AiDrawer.vue @@ -1,7 +1,8 @@ @@ -17,7 +18,7 @@ export default { event: "input" }, props: { - seal: String, + seal: {default: null}, placeholder: {type: String, default: "请在此处清晰书写你的签名"}, }, data() { @@ -26,6 +27,11 @@ export default { url: "/components/pages/sealDrawer" } } + }, + methods: { + getSeal(image) { + this.$emit("input", image) + } } } @@ -42,6 +48,11 @@ export default { & > div { height: 100%; } + + .sealImage { + width: 100%; + height: 100%; + } } .placeholder { diff --git a/src/components/pages/sealDrawer.vue b/src/components/pages/sealDrawer.vue index 82d02f16..7815b65f 100644 --- a/src/components/pages/sealDrawer.vue +++ b/src/components/pages/sealDrawer.vue @@ -1,13 +1,11 @@ @@ -16,12 +14,7 @@ export default { name: "sealDrawer", appName: "签名", - model: { - prop: "seal", - event: "input" - }, props: { - seal: String, placeholder: {type: String, default: "请在此处清晰书写你的签名"}, }, data() { @@ -45,48 +38,51 @@ export default { let canvas = uni.createCanvasContext("drawer") if (canvas) { this.drawer = canvas - this.drawer.lineWidth = 3 - this.drawer.shadowColor = '#333' - this.drawer.strokeStyle = '#333' - this.drawer.shadowBlur = 2 + this.drawer.setLineWidth(3) + this.drawer.setShadow(0, 0, 2, '#333') + this.drawer.setStrokeStyle('#333') } }) }, handleDrawStart(e) { this.drawing = true - const canvasX = e.offsetX - const canvasY = e.offsetY + const {x, y} = e.changedTouches?.[0] || {} this.drawer?.beginPath() - this.drawer?.moveTo(canvasX, canvasY) + this.drawer?.moveTo(x, y) }, handleDrawEnd() { this.drawing = false - const result = this.drawer.canvas?.toDataURL("image/png", 1) - this.$emit("input", result) - this.$emit("update:seal", result) }, handleDrawing(e) { - console.log(e) if (this.drawing) { - const t = e.target?.getBoundingClientRect() - let canvasX - let canvasY - // 根据触发事件类型来进行定位 - if (e.type == "touchmove") { - canvasX = e.changedTouches[0].clientX - t.x - canvasY = e.changedTouches[0].clientY - t.y - } else { - canvasX = e.offsetX - canvasY = e.offsetY - } - // 连接到移动的位置并上色 - this.drawer?.lineTo(canvasX, canvasY) - this.drawer?.stroke() + const {x, y} = e.changedTouches?.[0] || {} + // // 连接到移动的位置并上色 + this.drawer.lineTo(x, y) + this.drawer.stroke() + this.drawer.draw(true) + this.drawer?.beginPath() + this.drawer?.moveTo(x, y) } }, handleClean() { - this.drawer.clearRect(0, 0, this.drawer.canvas.width, this.drawer.canvas.height) + this.drawer.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight) + this.drawer.draw() this.drawPlaceholder = true + }, + submit() { + uni.canvasToTempFilePath({ + canvasId: 'drawer', + quality: 1, + success: res => { + // 在H5平台下,tempFilePath 为 base64 + const result = res.tempFilePath + uni.navigateBack({ + success: () => { + uni.$emit("pagePicker:custom", result) + } + }) + } + }) } } } @@ -116,19 +112,16 @@ export default { display: flex; align-items: center; justify-content: center; - gap: 8px; - color: rgba(#fff, .6); + color: #fff; cursor: pointer; right: 16px; top: 16px; + font-size: 20px; + z-index: 2; - .AiIcon { - width: auto; - height: auto; - } - - &:hover { - color: #fff; + &.left { + right: unset; + left: 16px; } } diff --git a/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue b/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue index 0d9ffd49..e7ff7430 100644 --- a/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue +++ b/src/project/hljmz/AppRecoScore/lib/dynaComponent.vue @@ -2,30 +2,39 @@