add: 添加文字

packages/webview/src/components/Signatures/SignCreatePanel.vue

@@ -86,12 +86,39 @@ const handleFile = (evt) => {
 }
 
 const saveFile=(evt)=>{
+
+  let showData=undefined
+
   if (activeSignWay.value === "image" && imageData.value!=='')
   {
-    let docDiv= document.querySelector('.content')
-    if(docDiv)
-    {
-      let imgUi= document.getElementById("sign-image-save")
+    showData=imageData.value
+  }
+
+  if (activeSignWay.value === "keyboard" && textSgin.value !== '') {
+    let canvasItem = document.createElement("canvas")
+    let canvasDraw = document.createElement("canvas")
+
+    let ctx = canvasItem.getContext("2d")
+    ctx.font = "46px  Segoe UI"
+    let textWidth = ctx.measureText(textSgin.value).width
+
+    canvasDraw.width = textWidth
+    canvasDraw.height = 60
+    ctx = canvasDraw.getContext("2d")
+
+    ctx.font = "46px  Segoe UI"
+    ctx.fillStyle = "white"
+    ctx.fillRect(0, 0, textWidth, 60)
+    ctx.fillStyle = "black"
+    ctx.fillText(textSgin.value, 0, 50)
+
+    showData = canvasDraw.toDataURL()
+  }
+
+  if (showData) {
+    let docDiv = document.querySelector('.content')
+    if (docDiv) {
+      let imgUi = document.getElementById("sign-image-save")
       if (!imgUi) {
         imgUi = document.createElement("img")
         imgUi.style.position = "absolute"
@@ -103,22 +130,21 @@ const saveFile=(evt)=>{
         imgUi.style.cursor = "crosshair"
         imgUi.id = "sign-image-save"
       }
-      
-      imgUi.setAttribute("src",imageData.value)
-      imgUi.style.left="50%"
-      imgUi.style.top="50%"
-      imgUi.style.display="hidden"
+
+      imgUi.setAttribute("src", showData)
+      imgUi.style.left = "50%"
+      imgUi.style.top = "50%"
+      imgUi.style.display = "hidden"
 
       docDiv.append(imgUi)
-      let offsetX=parseInt(imgUi.width/2)
-      let offsetY=parseInt(imgUi.height/2)
-      imgUi.style.left="calc(50% -"+offsetX+")"
-      imgUi.style.top="calc(50% -"+offsetY+")"
-      imgUi.style.display="block"
-      docDiv.onmousemove=function(evt)
-      {
-        imgUi.style.left=(evt.clientX-offsetX)+"px"
-        imgUi.style.top=(evt.clientY-offsetY)+"px"
+      let offsetX = parseInt(imgUi.width / 2)
+      let offsetY = parseInt(imgUi.height / 2)
+      imgUi.style.left = "calc(50% -" + offsetX + ")"
+      imgUi.style.top = "calc(50% -" + offsetY + ")"
+      imgUi.style.display = "block"
+      docDiv.onmousemove = function (evt) {
+        imgUi.style.left = (evt.clientX - offsetX) + "px"
+        imgUi.style.top = (evt.clientY - offsetY) + "px"
       }
     }
     closePanel()