vislite 0.4.1-alpha.0 → 0.4.1-alpha.2

package/src/WebGL.ts

@@ -1,12 +1,15 @@
 import WebGLType from '../types/WebGL'
 import OralWebGL from './common/webgl/index'
+import WebGLOptionType from '../types/WebGLOption'
 
 class WebGL extends OralWebGL implements WebGLType {
-    constructor(el: HTMLElement | null) {
+    constructor(el: HTMLElement | null, option: WebGLOptionType = {}) {
         if (!el) {
             throw new Error("VISLite WebGL:The mount point requires an HTMLElement type but encountered null.")
         }
 
+        if (!('region' in option)) option.region = true
+
         let width = el.clientWidth, height = el.clientHeight
 
         let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement
@@ -22,12 +25,16 @@ class WebGL extends OralWebGL implements WebGLType {
         // 否则就初始化
         else {
 
-            RegionCanvas = document.createElement('canvas')
-            el.appendChild(RegionCanvas)
+            if (option.region) {
+
+                RegionCanvas = document.createElement('canvas')
+                el.appendChild(RegionCanvas)
+
+                RegionCanvas.style.position = 'absolute'
+                RegionCanvas.style.zIndex = "-1"
+                RegionCanvas.style.opacity = "0"
 
-            RegionCanvas.style.position = 'absolute'
-            RegionCanvas.style.zIndex = "-1"
-            RegionCanvas.style.opacity = "0"
+            }
 
             ViewCanvas = document.createElement('canvas')
             el.appendChild(ViewCanvas)
@@ -40,11 +47,13 @@ class WebGL extends OralWebGL implements WebGLType {
         // 设置画布大小
         for (let canvas of [ViewCanvas, RegionCanvas]) {
 
-            canvas.style.width = width + "px"
-            canvas.setAttribute('width', width + "")
+            if (canvas) {
+                canvas.style.width = width + "px"
+                canvas.setAttribute('width', width + "")
 
-            canvas.style.height = height + "px"
-            canvas.setAttribute('height', height + "")
+                canvas.style.height = height + "px"
+                canvas.setAttribute('height', height + "")
+            }
         }
 
         super(ViewCanvas, RegionCanvas)

package/src/common/canvas/index.ts

@@ -27,9 +27,9 @@ class Canvas extends PainterRender {
     super(
       ViewCanvas,
       {},
-      new PainterRender(RegionCanvas, {
+      RegionCanvas ? new PainterRender(RegionCanvas, {
         willReadFrequently: true,
-      })
+      }) : null
     )
 
     this.setRegion("")
@@ -46,18 +46,20 @@ class Canvas extends PainterRender {
 
   // 设置当前绘制区域名称
   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] + ")"
-      }
+    if (this.__region) {
+      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")
+        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
   }
@@ -65,26 +67,31 @@ class Canvas extends PainterRender {
   // 获取当前事件触发的区域名称
   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 imgData = this.__region ? this.__region.painter.getImageData(x - 0.5, y - 0.5, 1, 1) : {
+        data: [0, 0, 0, 0]
+      }
 
       // 获取点击点的颜色
       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
+        if (this.__region) {
+
+          // 查找当前点击的区域
+          for (let key in this.__regionList) {
+            if (
+              "rgb(" +
+              currentRGBA[0] +
+              "," +
+              currentRGBA[1] +
+              "," +
+              currentRGBA[2] +
+              ")" ==
+              this.__regionList[key]
+            ) {
+              resolve(key)
+              break
+            }
           }
         }
 
@@ -121,7 +128,7 @@ class Canvas extends PainterRender {
 
   // 获取原始画笔
   getContext(isRegion = false) {
-    return isRegion ? this.__region.painter : this.painter
+    return isRegion ? (this.__region ? this.__region.painter : null) : this.painter
   }
 
   // 线性渐变

package/src/common/canvas/texts.ts

@@ -2,7 +2,7 @@ export default function (painter: CanvasRenderingContext2D, contents: string, wi
 
     let lineNumber = 0, content = ""
     for (let i = 0; i < contents.length; i++) {
-        if (painter.measureText(content + contents[i]).width > width) {
+        if (painter.measureText(content + contents[i]).width > width || /\n$/.test(content)) {
             lineNumber += 1
             doback(content, (lineNumber - 0.5) * height)
 

package/src/common/webgl/index.ts

@@ -45,11 +45,13 @@ class WebGL {
         this.__unique = new Date().valueOf()
 
         this.painter = getWebGLContext(ViewCanvas, scale)
-        this.__regionPainter = getWebGLContext(RegionCanvas, scale, {
+        if (RegionCanvas) {
+            this.__regionPainter = getWebGLContext(RegionCanvas, scale, {
 
-            // 如果不设置，涉及到缓冲区的情况可能无法获取颜色
-            // preserveDrawingBuffer: true
-        })
+                // 如果不设置，涉及到缓冲区的情况可能无法获取颜色
+                // preserveDrawingBuffer: true
+            })
+        }
 
         let proportion = this.painter.canvas.width / this.painter.canvas.height
 
@@ -88,8 +90,10 @@ class WebGL {
     review(isUpdateRegion = false) {
 
         if (isUpdateRegion) {
-            this.__regionPainter.clearColor(1, 1, 1, 1)
-            this.__regionPainter.clear(this.__regionPainter.COLOR_BUFFER_BIT)
+            if (this.__regionPainter) {
+                this.__regionPainter.clearColor(1, 1, 1, 1)
+                this.__regionPainter.clear(this.__regionPainter.COLOR_BUFFER_BIT)
+            }
         } else {
             this.painter.clearColor(1, 1, 1, 1)
             this.painter.clear(this.painter.COLOR_BUFFER_BIT)
@@ -119,20 +123,22 @@ class WebGL {
         for (let index = 0; index < object3D.mesh.length; index++) {
 
             if (isUpdateRegion) {
-                // 区域上
-                doDraw("painter" + this.__unique, this.__regionPainter, {
-                    geometry: object3D.mesh[index].geometry,
-                    material: {
-                        color: {
-                            r: this.__regionColor[0],
-                            g: this.__regionColor[1],
-                            b: this.__regionColor[2],
-                            alpha: this.__regionColor[3]
+                if (this.__regionPainter) {
+                    // 区域上
+                    doDraw("painter" + this.__unique, this.__regionPainter, {
+                        geometry: object3D.mesh[index].geometry,
+                        material: {
+                            color: {
+                                r: this.__regionColor[0],
+                                g: this.__regionColor[1],
+                                b: this.__regionColor[2],
+                                alpha: this.__regionColor[3]
+                            }
                         }
-                    }
-                }, meshWorld, globalWorld)
+                    }, meshWorld, globalWorld)
 
-                this.__getColor = getColorFactory(this.__regionPainter)
+                    this.__getColor = getColorFactory(this.__regionPainter)
+                }
             } else {
                 // 画布上
                 doDraw("region" + this.__unique, this.painter, object3D.mesh[index], meshWorld, globalWorld)

package/src/ruler.ts

@@ -1,7 +1,9 @@
 // 刻度尺刻度求解
 
+import { rulerOptionType } from '../types/ruler'
+
 // 需要注意的是，实际的间距个数可能是 num-1 或 num 或 num+1 或 1
-export default function (maxValue: number, minValue: number, num: number) {
+export default function (maxValue: number, minValue: number, num: number, option?: rulerOptionType) {
 
     // 如果最大值最小值反了
     if (maxValue < minValue) {
@@ -57,43 +59,130 @@ export default function (maxValue: number, minValue: number, num: number) {
 
 
     // 求解出 -100 ~ 100 的最佳间距值 后直接转换原来的倍数
-    let distance100 = Math.ceil((maxValue - minValue) * times100 / num)
-
-    // 校对一下
-    distance100 = {
-        3: 2,
-        4: 5,
-        6: 5,
-        7: 5,
-        8: 10,
-        9: 10,
-        11: 10,
-        12: 10,
-        13: 15,
-        14: 15,
-        16: 15,
-        17: 15,
-        18: 20,
-        19: 20,
-        21: 20,
-        22: 20,
-        23: 25,
-        24: 25,
-        26: 25,
-        27: 25
-    }[distance100] || distance100
-
-    let distance = distance100 / times100
-
-    // 最小值，也就是起点
-    let begin = Math.floor(minValue / distance) * distance
-
-    let rulerArray = []
-    // 获取最终的刻度尺数组
-    rulerArray.push(begin)
-    for (let index = 1; rulerArray[rulerArray.length - 1] < maxValue; index++) {
-        rulerArray.push(begin + distance * index)
+    let distance100_oral = Math.ceil((maxValue - minValue) * times100 / num)
+
+    let getResult = (changValue: number) => {
+        // 校对一下
+        let distance100 = {
+            3: 2,
+            4: 5,
+            6: 5,
+            7: 5,
+            8: 10,
+            9: 10,
+            11: 10,
+            12: 10,
+            13: 15,
+            14: 15,
+            16: 15,
+            17: 15,
+            18: 20,
+            19: 20,
+            21: 20,
+            22: 20,
+            23: 25,
+            24: 25,
+            26: 25,
+            27: 25
+        }[distance100_oral + changValue] || (distance100_oral + changValue)
+
+        let distance = distance100 / times100
+
+        // 最小值，也就是起点
+        let begin = Math.floor(minValue / distance) * distance
+
+        let rulerArray = []
+        // 获取最终的刻度尺数组
+        rulerArray.push(begin)
+        for (let index = 1; rulerArray[rulerArray.length - 1] < maxValue; index++) {
+            rulerArray.push(begin + distance * index)
+        }
+
+        return rulerArray
     }
 
+    let rulerArray = getResult(0)
+
+    let balanceMax = () => {
+        let rulerArray_temp = []
+
+        let changeDist = rulerArray[rulerArray.length - 1] - option.max
+        for (let index = 0; index < rulerArray.length; index++) {
+            if (index + 1 < rulerArray.length && rulerArray[index + 1] - changeDist < minValue) {
+                // 多余的
+            } else {
+                rulerArray_temp.push(rulerArray[index] - changeDist)
+            }
+        }
+
+        return rulerArray_temp
+    }
+
+    let balanceMin = () => {
+        let rulerArray_temp = []
+
+        let changeDist = rulerArray[0] - option.min
+        for (let index = 0; index < rulerArray.length; index++) {
+            rulerArray_temp[index] = rulerArray[index] - changeDist
+            if (maxValue <= rulerArray_temp[index]) break
+        }
+
+        return rulerArray_temp
+    }
+
+    if (option) {
+
+        // 上下界限制
+        if ('max' in option && 'min' in option && option.max >= maxValue && option.min <= minValue) {
+
+            let isAnswer = () => {
+
+                // 先判断原始的是否可行
+                if (rulerArray[0] >= option.min && rulerArray[rulerArray.length - 1] <= option.max) return true
+
+                // 再判断max调整是否可行
+                let rulerArray_max = balanceMax()
+                if (rulerArray_max[0] >= option.min && rulerArray_max[rulerArray_max.length - 1] <= option.max) {
+                    rulerArray = rulerArray_max
+                    return true
+                }
+
+                // 再判断max调整是否可行
+                let rulerArray_min = balanceMin()
+                if (rulerArray_min[0] >= option.min && rulerArray_min[rulerArray_max.length - 1] <= option.max) {
+                    rulerArray = rulerArray_min
+                    return true
+                }
+
+            }
+
+            if (isAnswer()) return rulerArray
+
+            for (let changValue = 1; changValue < 100; changValue++) {
+
+                rulerArray = getResult(changValue)
+                if (isAnswer()) return rulerArray
+
+                rulerArray = getResult(-changValue)
+                if (isAnswer()) return rulerArray
+
+            }
+        }
+
+        // 单界限制
+        if ('max' in option && option.max >= maxValue) {
+
+            // 上越界了
+            if (option.max < rulerArray[rulerArray.length - 1]) {
+                rulerArray = balanceMax()
+            }
+        } else if ('min' in option && option.min <= minValue) {
+
+            // 下越界了
+            if (option.min > rulerArray[0]) {
+                rulerArray = balanceMin()
+            }
+        }
+    }
     return rulerArray
 }

package/types/CanvasOption.d.ts

@@ -0,0 +1,8 @@
+export default interface CanvasOptionType {
+
+    /**
+    * 是否支持区域管理，默认true
+    */
+    region?: boolean
+
+}

package/types/WebGLOption.d.ts

@@ -0,0 +1,8 @@
+export default interface WebGLOptionType {
+
+    /**
+    * 是否支持区域管理，默认true
+    */
+    region?: boolean
+
+}

package/types/index.d.ts

@@ -12,6 +12,9 @@ import SVGType from './SVG'
 import CanvasType from './Canvas'
 import WebGLType from './WebGL'
 
+import CanvasOptionType from './CanvasOption'
+import WebGLOptionType from './WebGLOption'
+
 import getWebGLContextType from './getWebGLContext'
 import ShaderType from './Shader'
 import BufferType from './Buffer'
@@ -39,10 +42,10 @@ interface NewSVGType extends SVGType {
     new(el: HTMLElement | null): this
 }
 interface NewCanvasType extends CanvasType {
-    new(el: HTMLElement | null): this
+    new(el: HTMLElement | null, option?: CanvasOptionType): this
 }
 interface NewWebGLType extends WebGLType {
-    new(el: HTMLElement | null): this
+    new(el: HTMLElement | null, option?: WebGLOptionType): this
 }
 
 // WebGL

package/types/ruler.d.ts

@@ -1,3 +1,8 @@
+export interface rulerOptionType {
+    max?: number
+    min?: number
+}
+
 export default interface rulerType {
-    (maxValue: number, minValue: number, num: number): number[]
+    (maxValue: number, minValue: number, num: number, option: rulerOptionType): number[]
 }

package/uni-app/ui-canvas.vue

@@ -7,17 +7,19 @@
     <!-- #ifdef MP-ALIPAY -->
     <canvas class="painter" :id="'painter-' + uniqueid" @touchstart="doitstart"
       :style="{ width: width + 'px', height: height + 'px' }"></canvas>
-    <canvas class="region" :id="'region-' + uniqueid" :style="{ width: width + 'px', height: height + 'px' }"></canvas>
+    <canvas v-if="region" class="region" :id="'region-' + uniqueid"
+      :style="{ width: width + 'px', height: height + 'px' }"></canvas>
     <!-- #endif -->
     <!-- #ifdef MP-WEIXIN -->
     <canvas class="painter" canvas-id="painter" @touchstart="doitstart"
       :style="{ width: width + 'px', height: height + 'px' }"></canvas>
-    <canvas class="region" canvas-id="region" :style="{ width: width + 'px', height: height + 'px' }"></canvas>
+    <canvas v-if="region" class="region" canvas-id="region"
+      :style="{ width: width + 'px', height: height + 'px' }"></canvas>
     <!-- #endif -->
     <!-- #ifndef MP-WEIXIN||MP-ALIPAY -->
     <canvas class="painter" :canvas-id="'painter-' + uniqueid" @touchstart="doitstart"
       :style="{ width: width + 'px', height: height + 'px' }"></canvas>
-    <canvas class="region" :canvas-id="'region-' + uniqueid"
+    <canvas v-if="region" class="region" :canvas-id="'region-' + uniqueid"
       :style="{ width: width + 'px', height: height + 'px' }"></canvas>
     <!-- #endif -->
   </view>
@@ -55,19 +57,23 @@ export default {
       type: Boolean,
       default: true,
     },
+    region: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     fetch() {
       let painter, region, painterid, regionid;
       // #ifdef MP-WEIXIN
       painter = uni.createCanvasContext("painter", this);
-      region = uni.createCanvasContext("region", this);
+      if (this.region) region = uni.createCanvasContext("region", this);
       painterid = "painter";
       regionid = "region";
       // #endif
       // #ifndef MP-WEIXIN
       painter = uni.createCanvasContext("painter-" + this.uniqueid, this);
-      region = uni.createCanvasContext("region-" + this.uniqueid, this);
+      if (this.region) region = uni.createCanvasContext("region-" + this.uniqueid, this);
       painterid = "painter-" + this.uniqueid;
       regionid = "region-" + this.uniqueid;
       // #endif
@@ -79,7 +85,7 @@ export default {
             return painter;
           },
         },
-        {
+        _this.region ? {
           getContext() {
             // #ifdef MP-ALIPAY
             let getImageData = region.getImageData;
@@ -110,26 +116,30 @@ export default {
             };
             return region;
           },
-        }
+        } : null
       );
-      this.help.instance.draw = () => {
-        painter.draw();
-        region.draw();
+      this.help.instance.draw = (reserve = false, callback = () => { }) => {
+        painter.draw(reserve, () => {
 
-        // 如果不使用原生渲染
-        if (!this.cover && !this.isH5) {
-          setTimeout(() => {
+          // 如果不使用原生渲染
+          if (!this.cover && !this.isH5) {
             uni.canvasToTempFilePath(
               {
                 canvasId: painterid,
                 success: (e) => {
                   this.viewImg = e.tempFilePath;
+                  if (_this.region) region.draw(reserve);
+                  callback();
                 },
               },
               this
             );
-          }, 300);
-        }
+          } else {
+            if (_this.region) region.draw(reserve);
+            callback();
+          }
+        });
+
       };
       return new Promise((resolve, reject) => {
         this.help.instance.toDataURL = () => {