vislite 0.2.0 → 0.3.0-alpha.0

package/types/Matrix4.d.ts

@@ -1,43 +1,43 @@
-export default interface Matrix4Type {
-
-    /**
-     * 返回matrix4当前记录的内部矩阵
-     */
-    value(): number[]
-
-    /**
-     * 两个矩阵相乘
-     * @param newMatrix4 
-     * @param flag 可选，表示相乘位置，默认false，表示左乘
-     */
-    multiply(newMatrix4: number[], flag?: boolean): this
-
-    /**
-     * 把变换矩阵作用在具体的点上
-     */
-    use(x: number, y: number, z?: number, w?: number): number[]
-
-    /**
-     * 沿着向量(a, b, c)方向移动距离dis
-     * （其中c可以不传，默认0）
-     */
-    move(dis: number, a: number, b: number, c?: number): this
-
-    /**
-     * 以点(cx, cy, cz)为中心，分别在x、y和z方向上缩放xTimes、yTimes和zTimes倍
-     * （其中cx、cy和cz都可以不传递，默认0）
-     */
-    scale(xTimes: number, yTimes: number, zTimes: number, cx?: number, cy?: number, cz?: number): this
-
-    /**
-     * 围绕射线(a1, b1, c1) -> (a2, b2, c2)旋转deg度
-     * （方向由右手法则确定）
-     * 
-     * a1、b1、c1、a2、b2和c2这6个值在设置的时候，不是一定需要全部设置，还有以下可选：
-     * 
-     *      1）只设置了a1和b1，表示在xoy平面围绕（a1, b1）旋转
-     *      2）设置三个点(设置不足六个点都认为只设置了三个点)，表示围绕从原点出发的射线旋转
-     */
-    rotate(deg: number, a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number): this
-
+export default interface Matrix4Type {
+
+    /**
+     * 返回matrix4当前记录的内部矩阵
+     */
+    value(): number[]
+
+    /**
+     * 两个矩阵相乘
+     * @param newMatrix4 
+     * @param flag 可选，表示相乘位置，默认false，表示左乘
+     */
+    multiply(newMatrix4: number[], flag?: boolean): this
+
+    /**
+     * 把变换矩阵作用在具体的点上
+     */
+    use(x: number, y: number, z?: number, w?: number): number[]
+
+    /**
+     * 沿着向量(a, b, c)方向移动距离dis
+     * （其中c可以不传，默认0）
+     */
+    move(dis: number, a: number, b: number, c?: number): this
+
+    /**
+     * 以点(cx, cy, cz)为中心，分别在x、y和z方向上缩放xTimes、yTimes和zTimes倍
+     * （其中cx、cy和cz都可以不传递，默认0）
+     */
+    scale(xTimes: number, yTimes: number, zTimes: number, cx?: number, cy?: number, cz?: number): this
+
+    /**
+     * 围绕射线(a1, b1, c1) -> (a2, b2, c2)旋转deg度
+     * （方向由右手法则确定）
+     * 
+     * a1、b1、c1、a2、b2和c2这6个值在设置的时候，不是一定需要全部设置，还有以下可选：
+     * 
+     *      1）只设置了a1和b1，表示在xoy平面围绕（a1, b1）旋转
+     *      2）设置三个点(设置不足六个点都认为只设置了三个点)，表示围绕从原点出发的射线旋转
+     */
+    rotate(deg: number, a1: number, b1: number, c1?: number, a2?: number, b2?: number, c2?: number): this
+
 }

package/types/SVG.d.ts

@@ -1,211 +1,211 @@
-import SVGConfigType from './SVGConfig'
-
-export default interface SVGType {
-
-    /**
-     * 配置画笔
-     */
-    config(configs: SVGConfigType): this
-
-    /**
-     * 标记应用节点
-     */
-    useEl(el: SVGElement): this
-
-    /**
-     * 获取当前应用的节点
-     */
-    getEl(): SVGElement
-
-    /**
-     * 追加节点
-     */
-    appendEl(el: string | SVGElement, context?: SVGElement): this
-
-    /**
-     * 追加绘制板
-     */
-    appendBoard(el: string | SVGElement, context?: SVGElement): this
-
-    /**
-     * 删除当前维护的节点
-     */
-    remove(): this
-
-    /**
-     * 设置或获取节点属性
-     */
-    attr(params?: any): any
-
-    /**
-     * 绘制一个实心文字
-     * @param text 需要绘制的文字
-     * @param x 绘制位置的x坐标
-     * @param y 绘制位置的y坐标
-     * @param deg 可选，文字旋转角度
-     */
-    fillText(text: any, x: number, y: number, deg?: number): this
-
-    /**
-     * 绘制一个空心文字
-     * @param text 需要绘制的文字
-     * @param x 绘制位置的x坐标
-     * @param y 绘制位置的y坐标
-     * @param deg 可选，文字旋转角度
-     */
-    strokeText(text: any, x: number, y: number, deg?: number): this
-
-    /**
-     * 绘制一个空实心文字
-     * @param text 需要绘制的文字
-     * @param x 绘制位置的x坐标
-     * @param y 绘制位置的y坐标
-     * @param deg 可选，文字旋转角度
-     */
-    fullText(text: any, x: number, y: number, deg?: number): this
-
-    /**
-  * 绘制一个实心的圆弧
-  * @param cx 圆弧的圆心x坐标
-  * @param cy 圆弧的圆心y坐标
-  * @param r1 圆弧的内半径
-  * @param r2 圆弧的外半径
-  * @param beginDeg 开始弧度
-  * @param deg 跨越弧度
-  */
-    fillArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number): this
-
-    /**
-     * 绘制一个空心的圆弧
-     * @param cx 圆弧的圆心x坐标
-     * @param cy 圆弧的圆心y坐标
-     * @param r1 圆弧的内半径
-     * @param r2 圆弧的外半径
-     * @param beginDeg 开始弧度
-     * @param deg 跨越弧度
-     */
-    strokeArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number): this
-
-    /**
-     * 绘制一个空实心的圆弧
-     * @param cx 圆弧的圆心x坐标
-     * @param cy 圆弧的圆心y坐标
-     * @param r1 圆弧的内半径
-     * @param r2 圆弧的外半径
-     * @param beginDeg 开始弧度
-     * @param deg 跨越弧度
-     */
-    fullArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number): this
-
-    /**
-        * 绘制一个实心的圆
-        * @param cx 圆心x坐标
-        * @param cy 圆心y坐标
-        * @param r 圆的半径
-        */
-    fillCircle(cx: number, cy: number, r: number): this
-
-    /**
-     * 绘制一个空心的圆
-     * @param cx 圆心x坐标
-     * @param cy 圆心y坐标
-     * @param r 圆的半径
-     */
-    strokeCircle(cx: number, cy: number, r: number): this
-
-    /**
-     * 绘制一个空实心的圆
-     * @param cx 圆心x坐标
-     * @param cy 圆心y坐标
-     * @param r 圆的半径
-     */
-    fullCircle(cx: number, cy: number, r: number): this
-
-    /**
-     * 绘制一个实心的矩形
-     * @param x 可选，区域左上角X坐标
-     * @param y 可选，区域左上角y坐标
-     * @param width 可选，区域的宽
-     * @param height 可选，区域的高
-     */
-    fillRect(x: number, y: number, width: number, height: number): this
-
-    /**
-     * 绘制一个空心的矩形
-     * @param x 可选，区域左上角X坐标
-     * @param y 可选，区域左上角y坐标
-     * @param width 可选，区域的宽
-     * @param height 可选，区域的高
-     */
-    strokeRect(x: number, y: number, width: number, height: number): this
-
-    /**
-     * 绘制一个空实心的矩形
-     * @param x 可选，区域左上角X坐标
-     * @param y 可选，区域左上角y坐标
-     * @param width 可选，区域的宽
-     * @param height 可选，区域的高
-     */
-    fullRect(x: number, y: number, width: number, height: number): this
-
-    /**
-     * 开始一段独立的路径
-     */
-    beginPath(): this
-
-    /**
-     * 闭合当前路径，也就是路径首尾闭合
-     */
-    closePath(): this
-
-    /**
-     * 画笔移动到点(x, y)，此时笔离开了画布
-     */
-    moveTo(x: number, y: number): this
-
-    /**
-     * 画笔移动到点(x, y)，此时笔没有离开画布
-     */
-    lineTo(x: number, y: number): this
-
-    /**
-     * 以(cx, cy)为圆心，半径r，从弧度beginDeg开始，跨越弧度deg画弧，此时笔没有离开画布
-     */
-    arc(cx: number, cy: number, r: number, beginDeg: number, deg: number): this
-
-    /**
-     * 二次贝塞尔曲线到
-     * @param cpx 控制点x坐标
-     * @param cpy 控制点y坐标
-     * @param x 终点x坐标
-     * @param y 终点y坐标
-     */
-    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this
-
-    /**
-     * 三次贝塞尔曲线到
-     * @param cpx1 控制点1的x坐标
-     * @param cpy1 控制点1的y坐标
-     * @param cpx2 控制点2的x坐标
-     * @param cpy2 控制点2的y坐标
-     * @param x 终点x坐标
-     * @param y 终点y坐标
-     */
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this
-
-    /**
-     * 把当前路径包裹的区域填充颜色
-     */
-    fill(): this
-
-    /**
-     * 把当前路径上色（轮廓线）
-     */
-    stroke(): this
-
-    /**
-     * 把当前路径画上轮廓线并填充颜色到当前路径所包裹的区域
-     */
-    full(): this
-
+import SVGConfigType from './SVGConfig'
+
+export default interface SVGType {
+
+    /**
+     * 配置画笔
+     */
+    config(configs: SVGConfigType): this
+
+    /**
+     * 标记应用节点
+     */
+    useEl(el: SVGElement): this
+
+    /**
+     * 获取当前应用的节点
+     */
+    getEl(): SVGElement
+
+    /**
+     * 追加节点
+     */
+    appendEl(el: string | SVGElement, context?: SVGElement): this
+
+    /**
+     * 追加绘制板
+     */
+    appendBoard(el: string | SVGElement, context?: SVGElement): this
+
+    /**
+     * 删除当前维护的节点
+     */
+    remove(): this
+
+    /**
+     * 设置或获取节点属性
+     */
+    attr(params?: any): any
+
+    /**
+     * 绘制一个实心文字
+     * @param text 需要绘制的文字
+     * @param x 绘制位置的x坐标
+     * @param y 绘制位置的y坐标
+     * @param deg 可选，文字旋转角度
+     */
+    fillText(text: any, x: number, y: number, deg?: number): this
+
+    /**
+     * 绘制一个空心文字
+     * @param text 需要绘制的文字
+     * @param x 绘制位置的x坐标
+     * @param y 绘制位置的y坐标
+     * @param deg 可选，文字旋转角度
+     */
+    strokeText(text: any, x: number, y: number, deg?: number): this
+
+    /**
+     * 绘制一个空实心文字
+     * @param text 需要绘制的文字
+     * @param x 绘制位置的x坐标
+     * @param y 绘制位置的y坐标
+     * @param deg 可选，文字旋转角度
+     */
+    fullText(text: any, x: number, y: number, deg?: number): this
+
+    /**
+  * 绘制一个实心的圆弧
+  * @param cx 圆弧的圆心x坐标
+  * @param cy 圆弧的圆心y坐标
+  * @param r1 圆弧的内半径
+  * @param r2 圆弧的外半径
+  * @param beginDeg 开始弧度
+  * @param deg 跨越弧度
+  */
+    fillArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number): this
+
+    /**
+     * 绘制一个空心的圆弧
+     * @param cx 圆弧的圆心x坐标
+     * @param cy 圆弧的圆心y坐标
+     * @param r1 圆弧的内半径
+     * @param r2 圆弧的外半径
+     * @param beginDeg 开始弧度
+     * @param deg 跨越弧度
+     */
+    strokeArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number): this
+
+    /**
+     * 绘制一个空实心的圆弧
+     * @param cx 圆弧的圆心x坐标
+     * @param cy 圆弧的圆心y坐标
+     * @param r1 圆弧的内半径
+     * @param r2 圆弧的外半径
+     * @param beginDeg 开始弧度
+     * @param deg 跨越弧度
+     */
+    fullArc(cx: number, cy: number, r1: number, r2: number, beginDeg: number, deg: number): this
+
+    /**
+        * 绘制一个实心的圆
+        * @param cx 圆心x坐标
+        * @param cy 圆心y坐标
+        * @param r 圆的半径
+        */
+    fillCircle(cx: number, cy: number, r: number): this
+
+    /**
+     * 绘制一个空心的圆
+     * @param cx 圆心x坐标
+     * @param cy 圆心y坐标
+     * @param r 圆的半径
+     */
+    strokeCircle(cx: number, cy: number, r: number): this
+
+    /**
+     * 绘制一个空实心的圆
+     * @param cx 圆心x坐标
+     * @param cy 圆心y坐标
+     * @param r 圆的半径
+     */
+    fullCircle(cx: number, cy: number, r: number): this
+
+    /**
+     * 绘制一个实心的矩形
+     * @param x 可选，区域左上角X坐标
+     * @param y 可选，区域左上角y坐标
+     * @param width 可选，区域的宽
+     * @param height 可选，区域的高
+     */
+    fillRect(x: number, y: number, width: number, height: number): this
+
+    /**
+     * 绘制一个空心的矩形
+     * @param x 可选，区域左上角X坐标
+     * @param y 可选，区域左上角y坐标
+     * @param width 可选，区域的宽
+     * @param height 可选，区域的高
+     */
+    strokeRect(x: number, y: number, width: number, height: number): this
+
+    /**
+     * 绘制一个空实心的矩形
+     * @param x 可选，区域左上角X坐标
+     * @param y 可选，区域左上角y坐标
+     * @param width 可选，区域的宽
+     * @param height 可选，区域的高
+     */
+    fullRect(x: number, y: number, width: number, height: number): this
+
+    /**
+     * 开始一段独立的路径
+     */
+    beginPath(): this
+
+    /**
+     * 闭合当前路径，也就是路径首尾闭合
+     */
+    closePath(): this
+
+    /**
+     * 画笔移动到点(x, y)，此时笔离开了画布
+     */
+    moveTo(x: number, y: number): this
+
+    /**
+     * 画笔移动到点(x, y)，此时笔没有离开画布
+     */
+    lineTo(x: number, y: number): this
+
+    /**
+     * 以(cx, cy)为圆心，半径r，从弧度beginDeg开始，跨越弧度deg画弧，此时笔没有离开画布
+     */
+    arc(cx: number, cy: number, r: number, beginDeg: number, deg: number): this
+
+    /**
+     * 二次贝塞尔曲线到
+     * @param cpx 控制点x坐标
+     * @param cpy 控制点y坐标
+     * @param x 终点x坐标
+     * @param y 终点y坐标
+     */
+    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): this
+
+    /**
+     * 三次贝塞尔曲线到
+     * @param cpx1 控制点1的x坐标
+     * @param cpy1 控制点1的y坐标
+     * @param cpx2 控制点2的x坐标
+     * @param cpy2 控制点2的y坐标
+     * @param x 终点x坐标
+     * @param y 终点y坐标
+     */
+    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): this
+
+    /**
+     * 把当前路径包裹的区域填充颜色
+     */
+    fill(): this
+
+    /**
+     * 把当前路径上色（轮廓线）
+     */
+    stroke(): this
+
+    /**
+     * 把当前路径画上轮廓线并填充颜色到当前路径所包裹的区域
+     */
+    full(): this
+
 }

package/types/animation.d.ts

@@ -1,7 +1,7 @@
-interface animationFun {
-    (deep: number): void
-}
-
-export default interface animationType {
-    (doback: animationFun, duration?: number, callback?: animationFun): Function
+interface animationFun {
+    (deep: number): void
+}
+
+export default interface animationType {
+    (doback: animationFun, duration?: number, callback?: animationFun): Function
 }

package/types/getLoopColors.d.ts

@@ -1,3 +1,3 @@
-export default interface getLoopColorsType {
-    (num: number, alpha?: number): string[]
+export default interface getLoopColorsType {
+    (num: number, alpha?: number): string[]
 }

package/types/rotate.d.ts

@@ -1,3 +1,3 @@
-export default interface rotateType {
-    (cx: number, cy: number, deg: number, x: number, y: number): number[]
+export default interface rotateType {
+    (cx: number, cy: number, deg: number, x: number, y: number): number[]
 }

package/types/ruler.d.ts

@@ -1,3 +1,3 @@
-export default interface rulerType {
-    (maxValue: number, minValue: number, num: number): number[]
+export default interface rulerType {
+    (maxValue: number, minValue: number, num: number): number[]
 }

package/uni-app/ui-canvas.vue

@@ -1,50 +1,24 @@
 <template>
   <view :class="cover || isH5 ? 'cover-view' : 'normal-view'">
     <view :class="'view-img view-' + uniqueid" @touchstart="doitstart">
-      <image
-        :style="{ width: width + 'px', height: height + 'px' }"
-        :src="viewImg"
-      ></image>
+      <image :style="{ width: width + 'px', height: height + 'px' }" :src="viewImg"></image>
     </view>
 
     <!-- #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 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>
     <!-- #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 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>
     <!-- #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"
-      :style="{ width: width + 'px', height: height + 'px' }"
-    ></canvas>
+    <canvas class="painter" :canvas-id="'painter-' + uniqueid" @touchstart="doitstart"
+      :style="{ width: width + 'px', height: height + 'px' }"></canvas>
+    <canvas class="region" :canvas-id="'region-' + uniqueid"
+      :style="{ width: width + 'px', height: height + 'px' }"></canvas>
     <!-- #endif -->
   </view>
 </template>
@@ -75,7 +49,7 @@ export default {
     },
     touchstart: {
       type: Function,
-      default: () => {},
+      default: () => { },
     },
     cover: {
       type: Boolean,
@@ -144,15 +118,17 @@ export default {
 
         // 如果不使用原生渲染
         if (!this.cover && !this.isH5) {
-          uni.canvasToTempFilePath(
-            {
-              canvasId: painterid,
-              success: (e) => {
-                this.viewImg = e.tempFilePath;
+          setTimeout(() => {
+            uni.canvasToTempFilePath(
+              {
+                canvasId: painterid,
+                success: (e) => {
+                  this.viewImg = e.tempFilePath;
+                },
               },
-            },
-            this
-          );
+              this
+            );
+          }, 300);
         }
       };
       return new Promise((resolve, reject) => {