From 540d65e2741e0de4f31ff55a72eab30e4ded27e0 Mon Sep 17 00:00:00 2001
From: qiang <guoshengqiang@live.com>
Date: Wed, 27 Mar 2019 18:10:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0CanvasContext?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=B1=9E=E6=80=A7=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/service/api/context/canvas.js        | 144 ++++++++++++++++++
 .../h5/components/page/transparent.js         |   2 +-
 2 files changed, 145 insertions(+), 1 deletion(-)

diff --git a/src/core/service/api/context/canvas.js b/src/core/service/api/context/canvas.js
index ca8b2d56d..c3ea0826a 100644
--- a/src/core/service/api/context/canvas.js
+++ b/src/core/service/api/context/canvas.js
@@ -434,6 +434,150 @@ class CanvasContext {
     this.clearActions()
     return actions
   }
+  set lineDashOffset (value) {
+    this.actions.push({
+      method: 'setLineDashOffset',
+      data: [value]
+    })
+  }
+  set globalCompositeOperation (type) {
+    this.actions.push({
+      method: 'setGlobalCompositeOperation',
+      data: [type]
+    })
+  }
+  set shadowBlur (level) {
+    this.actions.push({
+      method: 'setShadowBlur',
+      data: [level]
+    })
+  }
+  set shadowColor (color) {
+    this.actions.push({
+      method: 'setShadowColor',
+      data: [color]
+    })
+  }
+  set shadowOffsetX (x) {
+    this.actions.push({
+      method: 'setShadowOffsetX',
+      data: [x]
+    })
+  }
+  set shadowOffsetY (y) {
+    this.actions.push({
+      method: 'setShadowOffsetY',
+      data: [y]
+    })
+  }
+  set font (value) {
+    var self = this
+    this.state.font = value
+    // eslint-disable-next-line
+    var fontFormat = value.match(/^(([\w\-]+\s)*)(\d+r?px)(\/(\d+\.?\d*(r?px)?))?\s+(.*)/)
+    if (fontFormat) {
+      var style = fontFormat[1].trim().split(/\s/)
+      var fontSize = parseFloat(fontFormat[3])
+      var fontFamily = fontFormat[7]
+      var actions = []
+      style.forEach(function (value, index) {
+        if (['italic', 'oblique', 'normal'].indexOf(value) > -1) {
+          actions.push({
+            method: 'setFontStyle',
+            data: [value]
+          })
+          self.state.fontStyle = value
+        } else if (['bold', 'normal'].indexOf(value) > -1) {
+          actions.push({
+            method: 'setFontWeight',
+            data: [value]
+          })
+          self.state.fontWeight = value
+        } else if (index === 0) {
+          actions.push({
+            method: 'setFontStyle',
+            data: ['normal']
+          })
+          self.state.fontStyle = 'normal'
+        } else if (index === 1) {
+          pushAction()
+        }
+      })
+      if (style.length === 1) {
+        pushAction()
+      }
+      style = actions.map(function (action) {
+        return action.data[0]
+      }).join(' ')
+      this.state.fontSize = fontSize
+      this.state.fontFamily = fontFamily
+      this.actions.push({
+        method: 'setFont',
+        data: [`${style} ${fontSize}px ${fontFamily}`]
+      })
+    } else {
+      console.warn("Failed to set 'font' on 'CanvasContext': invalid format.")
+    }
+    function pushAction () {
+      actions.push({
+        method: 'setFontWeight',
+        data: ['normal']
+      })
+      self.state.fontWeight = 'normal'
+    }
+  }
+  get font () {
+    return this.state.font
+  }
+  set fillStyle (color) {
+    this.setFillStyle(color)
+  }
+  set strokeStyle (color) {
+    this.setStrokeStyle(color)
+  }
+  set globalAlpha (value) {
+    value = Math.floor(255 * parseFloat(value))
+    this.actions.push({
+      method: 'setGlobalAlpha',
+      data: [value]
+    })
+  }
+  set textAlign (align) {
+    this.actions.push({
+      method: 'setTextAlign',
+      data: [align]
+    })
+  }
+  set lineCap (type) {
+    this.actions.push({
+      method: 'setLineCap',
+      data: [type]
+    })
+  }
+  set lineJoin (type) {
+    this.actions.push({
+      method: 'setLineJoin',
+      data: [type]
+    })
+  }
+  set lineWidth (value) {
+    this.actions.push({
+      method: 'setLineWidth',
+      data: [value]
+    })
+  }
+  set miterLimit (value) {
+    this.actions.push({
+      method: 'setMiterLimit',
+      data: [value]
+    })
+  }
+  set textBaseline (type) {
+    this.actions.push({
+      method: 'setTextBaseline',
+      data: [type]
+    })
+  }
 }
 
 [...methods1, ...methods2].forEach(function (method) {
diff --git a/src/platforms/h5/components/page/transparent.js b/src/platforms/h5/components/page/transparent.js
index 78e99790e..acfc895c0 100644
--- a/src/platforms/h5/components/page/transparent.js
+++ b/src/platforms/h5/components/page/transparent.js
@@ -46,7 +46,7 @@ export default {
         transparentElemStyle.backgroundColor = `rgba(${this._R},${this._G},${this._B},${alpha})`
         borderRadiusElemsStyles.forEach(function (borderRadiusElemStyle, index) {
           let oldColor = oldColors[index]
-          /* eslint-disable */
+          // eslint-disable-next-line
           let rgba = oldColor.match(/[\d+\.]+/g)
           rgba[3] = (1 - alpha) * (rgba.length === 4 ? rgba[3] : 1)
           borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
-- 
GitLab