vislite 0.2.0 → 0.3.0-alpha.0

package/src/common/canvas/index.ts

@@ -1,97 +1,137 @@
-import CanvasConfigType from '../../../types/CanvasConfig'
-import PainterRender from './painter'
-import assemble from '../assemble'
+import CanvasConfigType from "../../../types/CanvasConfig"
+import PainterRender from "./painter"
+import assemble from "../assemble"
+import { linearGradient, radialGradient } from "./gradient"
 
 // 属性名向下兼容
 let oldAttrName = {
-    "font-size": "fontSize",
-    "font-family": "fontFamily",
-    "font-weight": "fontWeight",
-    "font-style": "fontStyle",
-    "arc-start-cap": "arcStartCap",
-    "arc-end-cap": "arcEndCap"
+  "font-size": "fontSize",
+  "font-family": "fontFamily",
+  "font-weight": "fontWeight",
+  "font-style": "fontStyle",
+  "arc-start-cap": "arcStartCap",
+  "arc-end-cap": "arcEndCap",
 }
 
 class Canvas extends PainterRender {
-
-    readonly name: string = "Canvas"
-
-    private __regionList = {} //区域映射表
-    private __regionAssemble = assemble(0, 255, 1, 3)
-
-    constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement) {
-        super(ViewCanvas, {}, new PainterRender(RegionCanvas, {
-            willReadFrequently: true
-        }))
-
-        this.setRegion("")
+  readonly name: string = "Canvas"
+
+  private __regionList = {} //区域映射表
+  private __regionAssemble = assemble(0, 255, 1, 3)
+
+  constructor(ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement) {
+    super(
+      ViewCanvas,
+      {},
+      new PainterRender(RegionCanvas, {
+        willReadFrequently: true,
+      })
+    )
+
+    this.setRegion("")
+  }
+
+  config(configs: CanvasConfigType) {
+    for (let key in configs) {
+      let _key = oldAttrName[key] || key
+      this.useConfig(_key, configs[key])
     }
 
-    config(configs: CanvasConfigType) {
-        for (let key in configs) {
-            let _key = oldAttrName[key] || key
-            this.useConfig(_key, configs[key])
+    return this
+  }
+
+  // 设置当前绘制区域名称
+  setRegion(regionName: string | number) {
+    if (regionName) {
+      if (this.__regionList[regionName] == undefined) {
+        let tempColor = this.__regionAssemble()
+        this.__regionList[regionName] =
+          "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
+      }
+
+      this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
+        this.__region.useConfig("strokeStyle", this.__regionList[regionName])
+    } else {
+      this.__region.useConfig("fillStyle", "#000000") &&
+        this.__region.useConfig("strokeStyle", "#000000")
+    }
+    return this
+  }
+
+  // 获取当前事件触发的区域名称
+  getRegion(x: number, y: number): Promise<string> {
+    return new Promise((resolve, reject) => {
+      let imgData = this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1)
+
+      // 获取点击点的颜色
+      let currentRGBA = imgData.data
+
+      let doit = () => {
+        // 查找当前点击的区域
+        for (let key in this.__regionList) {
+          if (
+            "rgb(" +
+              currentRGBA[0] +
+              "," +
+              currentRGBA[1] +
+              "," +
+              currentRGBA[2] +
+              ")" ==
+            this.__regionList[key]
+          ) {
+            resolve(key)
+            break
+          }
         }
 
-        return this
-    }
+        resolve("")
+      }
 
-    // 设置当前绘制区域名称
-    setRegion(regionName: string | number) {
-        if (regionName) {
-            if (this.__regionList[regionName] == undefined) {
-                let tempColor = this.__regionAssemble()
-                this.__regionList[regionName] = "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
-            }
-
-            this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
-                this.__region.useConfig("strokeStyle", this.__regionList[regionName])
-        } else {
-            this.__region.useConfig("fillStyle", "#000000") &&
-                this.__region.useConfig("strokeStyle", "#000000")
-        }
-        return this
-    }
+      // 如果有值
+      if (currentRGBA) {
+        doit()
+      }
 
-    // 获取当前事件触发的区域名称
-    getRegion(x: number, y: number): Promise<string> {
-        return new Promise((resolve, reject) => {
-            let imgData = this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1)
-
-            // 获取点击点的颜色
-            let currentRGBA = imgData.data
-
-            let doit = () => {
-                // 查找当前点击的区域
-                for (let key in this.__regionList) {
-                    if ("rgb(" + currentRGBA[0] + "," + currentRGBA[1] + "," + currentRGBA[2] + ")" == this.__regionList[key]) {
-                        resolve(key)
-                        break
-                    }
-                }
-
-                resolve("")
-            }
-
-            // 如果有值
-            if (currentRGBA) {
-                doit()
-            }
-
-            // 否则就是在Promise中
-            else {
-                (imgData as any).then((data: Uint8ClampedArray) => {
-                    currentRGBA = data
-                    doit()
-                })
-            }
+      // 否则就是在Promise中
+      else {
+        (imgData as any).then((data: Uint8ClampedArray) => {
+          currentRGBA = data
+          doit()
         })
-    }
-
-    // 获取原始画笔
-    getContext(isRegion = false) {
-        return isRegion ? this.__region.painter : this.painter
-    }
+      }
+    })
+  }
+
+  // 获取原始画笔
+  getContext(isRegion = false) {
+    return isRegion ? this.__region.painter : this.painter
+  }
+
+  // 线性渐变
+  createLinearGradient(x0: number, y0: number, x1: number, y1: number) {
+    return linearGradient(this.painter, x0, y0, x1, y1)
+  }
+
+  // 环形渐变
+  createRadialGradient(cx: number, cy: number, r: number) {
+    return radialGradient(this.painter, cx, cy, r)
+  }
+
+  // 获取指定位置颜色
+  getColor(x: number, y: number) {
+    let currentRGBA = this.painter.getImageData(x - 0.5, y - 0.5, 1, 1).data
+    return (
+      "rgba(" +
+      currentRGBA[0] +
+      "," +
+      currentRGBA[1] +
+      "," +
+      currentRGBA[2] +
+      "," +
+      currentRGBA[3] +
+      ")"
+    )
+  }
 }
 
-export default Canvas
+export default Canvas

package/src/common/canvas/painter.ts

@@ -101,6 +101,12 @@ class Painter {
 
         // 如果已经存在默认配置中，说明只需要缓存起来即可
         else if (key in this.__specialConfig) {
+
+            // 文字非整数可能存在问题，修复一下
+            if (key == 'fontSize') {
+                value = Math.round(value)
+            }
+
             this.__specialConfig[key] = value
         }
 
@@ -251,6 +257,12 @@ class Painter {
         this.painter.restore()
         return this
     }
+    clip() {
+        if (this.__region) this.__region.clip()
+
+        this.painter.clip()
+        return this
+    }
 
     // 路径 - 贝塞尔曲线
     quadraticCurveTo(cpx: number, cpy: number, x: number, y: number) {

package/src/common/setStyle.ts

@@ -1,6 +1,6 @@
-// 修改样式
-export default function (el: HTMLElement | SVGElement, styles: any) {
-    for (let key in styles) {
-        el.style[key] = styles[key]
-    }
+// 修改样式
+export default function (el: HTMLElement | SVGElement, styles: any) {
+    for (let key in styles) {
+        el.style[key] = styles[key]
+    }
 }

package/src/common/svg/config.ts

@@ -1,128 +1,173 @@
-import { setAttribute } from "./tool"
-import setStyle from "../setStyle"
-import arc from '../canvas/arc'
-import SVGConfigType from '../../../types/SVGConfig'
-
-// 文字统一设置方法
-export let initText = (el: SVGElement, config: SVGConfigType, x: number, y: number, deg: number) => {
-    if (el.nodeName.toLowerCase() !== 'text') throw new Error('Need a <text> !')
-
-    // 垂直对齐采用dy实现
-    setAttribute(el, "dy", {
-        "top": config['font-size'] * 0.5,
-        "middle": 0,
-        "bottom": -config['font-size'] * 0.5,
-    }[config.textBaseline])
-
-    setStyle(el, {
-
-        // 文字对齐方式
-        "text-anchor": {
-            "left": "start",
-            "right": "end",
-            "center": "middle"
-        }[config.textAlign],
-        "dominant-baseline": "central",
-
-        // 文字大小和字体设置
-        "font-size": config['font-size'] + "px",
-        "font-family": config['font-family']
-    })
-
-    // 位置
-    setAttribute(el, "x", x)
-    setAttribute(el, "y", y)
-
-    // 旋转
-    if (typeof deg == "number") {
-        deg = deg % 360
-        setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")")
-    }
-}
-
-// 画圆统一设置方法
-export let initCircle = (el: SVGElement, cx: number, cy: number, r: number) => {
-    if (el.nodeName.toLowerCase() !== 'circle') throw new Error('Need a <circle> !')
-    setAttribute(el, 'cx', cx)
-    setAttribute(el, 'cy', cy)
-    setAttribute(el, 'r', r)
-}
-
-// 路径统一设置方法
-export let initPath = (el: SVGElement, path: string) => {
-    if (el.nodeName.toLowerCase() !== 'path') throw new Error('Need a <path> !')
-    setAttribute(el, 'd', path)
-}
-
-// 画矩形统一设置方法
-export let initRect = (el: SVGElement, x: number, y: number, width: number, height: number) => {
-    if (el.nodeName.toLowerCase() !== 'rect') throw new Error('Need a <rect> !')
-
-    // 由于高和宽不可以是负数，校对一下
-    if (height < 0) { height *= -1; y -= height }
-    if (width < 0) { width *= -1; x -= width }
-
-    setAttribute(el, 'x', x)
-    setAttribute(el, 'y', y)
-    setAttribute(el, 'width', width)
-    setAttribute(el, 'height', height)
-}
-
-// 画弧统一设置方法
-export let initArc = (el: SVGElement, config: SVGConfigType, cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number) => {
-
-    if (el.nodeName.toLowerCase() !== 'path') throw new Error('Need a <path> !')
-
-    beginDeg = beginDeg % (Math.PI * 2)
-
-    if (r1 > r2) {
-        let temp = r1
-        r1 = r2
-        r2 = temp
-    }
-
-    // 当|deg|>=2π的时候都认为是一个圆环
-    if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
-        deg = Math.PI * 1.999999
-    } else {
-        deg = deg % (Math.PI * 2)
-    }
-
-    arc(beginDeg, deg, cx, cy, r1, r2, function (
-        beginA: number, endA: number,
-        begInnerX: number, begInnerY: number,
-        begOuterX: number, begOuterY: number,
-        endInnerX: number, endInnerY: number,
-        endOuterX: number, endOuterY: number,
-        r: number
-    ) {
-
-        let f = (endA - beginA) > Math.PI ? 1 : 0,
-            d = "M" + begInnerX + " " + begInnerY
-        if (r < 0) r = -r
-        d +=
-            // 横半径 竖半径 x轴偏移角度 0小弧/1大弧 0逆时针/1顺时针 终点x 终点y
-            "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY
-
-        // 结尾
-        if (config["arc-end-cap"] == 'round')
-            d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY
-        else if (config["arc-end-cap"] == '-round')
-            d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY
-        else
-            d += "L" + endOuterX + " " + endOuterY
-        d += "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY
-
-        // 开头
-        if (config["arc-start-cap"] == 'round')
-            d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY
-        else if (config["arc-start-cap"] == '-round')
-            d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY
-        else
-            d += "L" + begInnerX + " " + begInnerY
-
-        if (config["arc-start-cap"] == 'butt') d += "Z"
-
-        setAttribute(el, 'd', d)
-    })
-}
+import { setAttribute } from "./tool"
+import setStyle from "../setStyle"
+import arc from "../canvas/arc"
+import SVGConfigType from "../../../types/SVGConfig"
+
+// 文字统一设置方法
+export let initText = (
+  el: SVGElement,
+  config: SVGConfigType,
+  x: number,
+  y: number,
+  deg: number
+) => {
+  if (el.nodeName.toLowerCase() !== "text") throw new Error("Need a <text> !")
+
+  // 垂直对齐采用dy实现
+  setAttribute(
+    el,
+    "dy",
+    {
+      top: config["fontSize"] * 0.5,
+      middle: 0,
+      bottom: -config["fontSize"] * 0.5,
+    }[config.textBaseline]
+  )
+
+  setStyle(el, {
+    // 文字对齐方式
+    "text-anchor": {
+      left: "start",
+      right: "end",
+      center: "middle",
+    }[config.textAlign],
+    "dominant-baseline": "central",
+
+    // 文字大小和字体设置
+    "font-size": config["fontSize"] + "px",
+    "font-family": config["fontFamily"],
+  })
+
+  // 位置
+  setAttribute(el, "x", x)
+  setAttribute(el, "y", y)
+
+  // 旋转
+  if (typeof deg == "number") {
+    deg = deg % 360
+    setAttribute(el, "transform", "rotate(" + deg + "," + x + "," + y + ")")
+  }
+}
+
+// 画圆统一设置方法
+export let initCircle = (el: SVGElement, cx: number, cy: number, r: number) => {
+  if (el.nodeName.toLowerCase() !== "circle")
+    throw new Error("Need a <circle> !")
+  setAttribute(el, "cx", cx)
+  setAttribute(el, "cy", cy)
+  setAttribute(el, "r", r)
+}
+
+// 路径统一设置方法
+export let initPath = (el: SVGElement, path: string) => {
+  if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
+  setAttribute(el, "d", path)
+}
+
+// 画矩形统一设置方法
+export let initRect = (
+  el: SVGElement,
+  x: number,
+  y: number,
+  width: number,
+  height: number
+) => {
+  if (el.nodeName.toLowerCase() !== "rect") throw new Error("Need a <rect> !")
+
+  // 由于高和宽不可以是负数，校对一下
+  if (height < 0) {
+    height *= -1
+    y -= height
+  }
+  if (width < 0) {
+    width *= -1
+    x -= width
+  }
+
+  setAttribute(el, "x", x)
+  setAttribute(el, "y", y)
+  setAttribute(el, "width", width)
+  setAttribute(el, "height", height)
+}
+
+// 画弧统一设置方法
+export let initArc = (
+  el: SVGElement,
+  config: SVGConfigType,
+  cx: number,
+  cy: number,
+  r1: number,
+  r2: number,
+  beginDeg: number,
+  deg: number
+) => {
+  if (el.nodeName.toLowerCase() !== "path") throw new Error("Need a <path> !")
+
+  beginDeg = (beginDeg / 180) * Math.PI
+  deg = (deg / 180) * Math.PI
+
+  beginDeg = beginDeg % (Math.PI * 2)
+
+  if (r1 > r2) {
+    let temp = r1
+    r1 = r2
+    r2 = temp
+  }
+
+  // 当|deg|>=2π的时候都认为是一个圆环
+  if (deg >= Math.PI * 1.999999 || deg <= -Math.PI * 1.999999) {
+    deg = Math.PI * 1.999999
+  } else {
+    deg = deg % (Math.PI * 2)
+  }
+
+  arc(
+    beginDeg,
+    deg,
+    cx,
+    cy,
+    r1,
+    r2,
+    function (
+      beginA: number,
+      endA: number,
+      begInnerX: number,
+      begInnerY: number,
+      begOuterX: number,
+      begOuterY: number,
+      endInnerX: number,
+      endInnerY: number,
+      endOuterX: number,
+      endOuterY: number,
+      r: number
+    ) {
+      let f = endA - beginA > Math.PI ? 1 : 0,
+        d = "M" + begInnerX + " " + begInnerY
+      if (r < 0) r = -r
+
+      d +=
+        // 横半径 竖半径 x轴偏移角度 0小弧/1大弧 0逆时针/1顺时针 终点x 终点y
+        "A" + r1 + " " + r1 + " 0 " + f + " 1 " + endInnerX + " " + endInnerY
+
+      // 结尾
+      if (config.arcEndCap == "round")
+        d += "A" + r + " " + r + " " + " 0 1 0 " + endOuterX + " " + endOuterY
+      else if (config.arcEndCap == "-round")
+        d += "A" + r + " " + r + " " + " 0 1 1 " + endOuterX + " " + endOuterY
+      else d += "L" + endOuterX + " " + endOuterY
+      d +=
+        "A" + r2 + " " + r2 + " 0 " + f + " 0 " + begOuterX + " " + begOuterY
+
+      // 开头
+      if (config.arcStartCap == "round")
+        d += "A" + r + " " + r + " " + " 0 1 0 " + begInnerX + " " + begInnerY
+      else if (config.arcStartCap == "-round")
+        d += "A" + r + " " + r + " " + " 0 1 1 " + begInnerX + " " + begInnerY
+      else d += "L" + begInnerX + " " + begInnerY
+
+      if (config.arcStartCap == "butt") d += "Z"
+
+      setAttribute(el, "d", d)
+    }
+  )
+}