cbvirtua 1.0.57 → 1.0.59

package/Signature.vue

@@ -1,493 +0,0 @@
-<template>
-  <div class="canvasBox">
-    <div class="canvasWrap">
-      <canvas id="canvas2"></canvas>
-      <canvas id="canvas"></canvas>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted } from 'vue'
-import { getStroke } from 'perfect-freehand'
-
-onMounted(() => {
-  const canvas = document.getElementById('canvas')
-  const canvas2 = document.getElementById('canvas2')
-  const canvasWidth = 500
-  const canvasHeight = 500
-  const ratio = Math.max(window.devicePixelRatio, 2)
-
-  const initCanvas = canvas => {
-    canvas.width = canvasWidth * ratio
-    canvas.height = canvasHeight * ratio
-    canvas.style.width = canvasWidth + 'px'
-    canvas.style.height = canvasHeight + 'px'
-    const ctx = canvas.getContext('2d')
-    ctx.scale(ratio, ratio)
-    return ctx
-  }
-  const ctx = initCanvas(canvas)
-  const ctx2 = initCanvas(canvas2)
-
-  const rect = canvas.getBoundingClientRect()
-  const windowToCanvas = e => {
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    return {
-      x,
-      y
-    }
-  }
-
-  const average = (a, b) => (a + b) / 2
-
-  const getTwoPointDistance = (x1, y1, x2, y2) => {
-    return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2))
-  }
-
-  // 增量绘制
-  const demo = () => {
-    let isMousedown = false
-    let lastPos = {
-      x: 0,
-      y: 0
-    }
-    canvas.addEventListener('mousedown', e => {
-      isMousedown = true
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-      lastPos = windowToCanvas(e)
-    })
-    window.addEventListener('mousemove', e => {
-      if (!isMousedown) return
-      ctx.beginPath()
-      ctx.moveTo(lastPos.x, lastPos.y)
-      lastPos = windowToCanvas(e)
-      ctx.lineTo(lastPos.x, lastPos.y)
-      ctx.lineWidth = 5
-      ctx.stroke()
-    })
-    window.addEventListener('mouseup', () => {
-      isMousedown = false
-    })
-  }
-  // demo()
-
-  // 重新绘制
-  const demo2 = () => {
-    let isMousedown = false
-    let pointList = []
-    let lastPos = null
-    canvas.addEventListener('mousedown', e => {
-      isMousedown = true
-      lastPos = windowToCanvas(e)
-      pointList.push(lastPos)
-    })
-    window.addEventListener('mousemove', e => {
-      if (!isMousedown) return
-      const curPos = windowToCanvas(e)
-      const distance = getTwoPointDistance(
-        curPos.x,
-        curPos.y,
-        lastPos.x,
-        lastPos.y
-      )
-      if (distance <= 4) {
-        return
-      }
-      lastPos = curPos
-      pointList.push(curPos)
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-      ctx.beginPath()
-      pointList.forEach((point, index) => {
-        if (index === 0) {
-          ctx.moveTo(point.x, point.y)
-        } else {
-          ctx.lineTo(point.x, point.y)
-        }
-      })
-      ctx.lineWidth = 5
-      ctx.stroke()
-    })
-    window.addEventListener('mouseup', () => {
-      isMousedown = false
-      pointList = []
-    })
-  }
-  // demo2()
-
-  // 曲线连接
-  const demo3 = () => {
-    let isMousedown = false
-    let pointList = []
-    let lastPos = null
-    canvas.addEventListener('mousedown', e => {
-      isMousedown = true
-      lastPos = windowToCanvas(e)
-      pointList.push(lastPos)
-    })
-    window.addEventListener('mousemove', e => {
-      if (!isMousedown) return
-      const curPos = windowToCanvas(e)
-      const distance = getTwoPointDistance(
-        curPos.x,
-        curPos.y,
-        lastPos.x,
-        lastPos.y
-      )
-      if (distance <= 4) {
-        return
-      }
-      lastPos = curPos
-      pointList.push(windowToCanvas(e))
-      const len = pointList.length
-      if (len < 4) {
-        return
-      }
-      const lastControlPoint = {
-        x: 0,
-        y: 0
-      }
-      const lastEndPoint = {
-        x: 0,
-        y: 0
-      }
-      let a = pointList[0]
-      let b = pointList[1]
-      const c = pointList[2]
-
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-      ctx.beginPath()
-      ctx.moveTo(a.x, a.y)
-
-      // 记录控制点和终点
-      lastControlPoint.x = b.x
-      lastControlPoint.y = b.y
-      lastEndPoint.x = average(b.x, c.x)
-      lastEndPoint.y = average(b.y, c.y)
-
-      ctx.quadraticCurveTo(
-        lastControlPoint.x,
-        lastControlPoint.y,
-        lastEndPoint.x,
-        lastEndPoint.y
-      )
-
-      for (let i = 2, max = len - 1; i < max; i++) {
-        a = pointList[i]
-        b = pointList[i + 1]
-        // 更新控制点和终点
-        lastControlPoint.x =
-          lastEndPoint.x + (lastEndPoint.x - lastControlPoint.x)
-        lastControlPoint.y =
-          lastEndPoint.y + (lastEndPoint.y - lastControlPoint.y)
-        lastEndPoint.x = average(a.x, b.x)
-        lastEndPoint.y = average(a.y, b.y)
-        ctx.quadraticCurveTo(
-          lastControlPoint.x,
-          lastControlPoint.y,
-          lastEndPoint.x,
-          lastEndPoint.y
-        )
-      }
-
-      ctx.lineWidth = 5
-      ctx.stroke()
-    })
-    window.addEventListener('mouseup', () => {
-      isMousedown = false
-      pointList = []
-    })
-  }
-  // demo3()
-
-  const perfect = () => {
-    let isMousedown = false
-    let pointList = []
-    let lineList = []
-    let line = null
-    canvas.addEventListener('mousedown', e => {
-      isMousedown = true
-      pointList = []
-      pointList.push(windowToCanvas(e))
-    })
-    window.addEventListener('mousemove', e => {
-      if (!isMousedown) return
-      pointList.push(windowToCanvas(e))
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-      lineList.forEach(item => {
-        ctx.fill(item)
-      })
-      const points = getStroke(pointList, {
-        size: 16,
-        thinning: 0.5,
-        smoothing: 0.5,
-        streamline: 0.5,
-        start: {
-          cap: true,
-          taper: 0,
-          easing: t => t
-        },
-        end: {
-          cap: true,
-          taper: 0,
-          easing: t => t
-        }
-      })
-      const pathData = getSvgPathFromStroke(points)
-      const path = new Path2D(pathData)
-      line = path
-      ctx.fill(path)
-    })
-    window.addEventListener('mouseup', () => {
-      isMousedown = false
-      lineList.push(line)
-    })
-
-    const getSvgPathFromStroke = points => {
-      const len = points.length
-      if (len < 4) {
-        return ''
-      }
-      let a = points[0]
-      let b = points[1]
-      const c = points[2]
-      let result = `M${a[0]},${a[1]} Q${b[0]},${b[1]} ${average(
-        b[0],
-        c[0]
-      )},${average(b[1], c[1])} T`
-      for (let i = 2, max = len - 1; i < max; i++) {
-        a = points[i]
-        b = points[i + 1]
-        result += `${average(a[0], b[0])},${average(a[1], b[1])} `
-      }
-      result += 'Z'
-      return result
-    }
-  }
-  // perfect()
-
-  // 两个canvas
-  const perfect2 = () => {
-    let isMousedown = false
-    let pointList = []
-    let lineList = []
-    let line = null
-    const clearCanvas = _ctx => {
-      _ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-    }
-    canvas.addEventListener('mousedown', e => {
-      isMousedown = true
-      pointList = []
-      pointList.push(windowToCanvas(e))
-    })
-    window.addEventListener('mousemove', e => {
-      if (!isMousedown) return
-      pointList.push(windowToCanvas(e))
-      clearCanvas(ctx)
-      const points = getStroke(pointList, {
-        size: 16,
-        thinning: 0.5,
-        smoothing: 0.5,
-        streamline: 0.5,
-        start: {
-          cap: true,
-          taper: 0,
-          easing: t => t
-        },
-        end: {
-          cap: true,
-          taper: 0,
-          easing: t => t
-        }
-      })
-      const pathData = getSvgPathFromStroke(points)
-      const path = new Path2D(pathData)
-      line = path
-      ctx.fill(path)
-    })
-    window.addEventListener('mouseup', () => {
-      isMousedown = false
-      lineList.push(line)
-      // 绘制完成后就将图形移到canvas2
-      clearCanvas(ctx)
-      clearCanvas(ctx2)
-      lineList.forEach(item => {
-        ctx2.fill(item)
-      })
-    })
-
-    const getSvgPathFromStroke = points => {
-      const len = points.length
-      if (len < 4) {
-        return ''
-      }
-      let a = points[0]
-      let b = points[1]
-      const c = points[2]
-      let result = `M${a[0]},${a[1]} Q${b[0]},${b[1]} ${average(
-        b[0],
-        c[0]
-      )},${average(b[1], c[1])} T`
-      for (let i = 2, max = len - 1; i < max; i++) {
-        a = points[i]
-        b = points[i + 1]
-        result += `${average(a[0], b[0])},${average(a[1], b[1])} `
-      }
-      result += 'Z'
-      return result
-    }
-  }
-  perfect2()
-})
-</script>
-
-<style lang="less" scoped>
-.canvasBox {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .canvasWrap {
-    position: relative;
-    width: 500px;
-    height: 500px;
-  }
-
-  canvas {
-    position: absolute;
-    left: 0;
-    top: 0;
-    border: 1px solid;
-  }
-}
-</style>
-<template>
-  <div class="progress-bar">
-      <div class="bg"></div>
-      <div class="bar" :style="{ width: progress + '%' }"></div>
-      <div class="label">{{ progress }}%</div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-      return {
-          progress: 0,
-          isPlaying: false,
-          isCompleted: false
-      }
-  },
-  mounted() {
-      this.start();
-  },
-  methods: {
-      start() {
-          this.isPlaying = true;
-          this.animateProgress(90)
-              .then(() => {
-                  if (!this.isCompleted) {
-                      this.animateProgress(100);
-                  }
-              })
-              .catch((error) => {
-                  console.error('Progress error', error);
-              });
-      },
-      animateProgress(target) {
-          return new Promise((resolve, reject) => {
-              let start = this.progress;
-              const end = target;
-              const duration = (target - start) * 150;
-
-              const doAnimation = () => {
-                  const elapsed = Date.now() - startTime;
-                  const progress = Math.min(elapsed / duration, 1);
-
-                  this.progress = start + ((end - start) * progress);
-
-                  if (progress === 1) {
-                      resolve();
-                  } else if (this.isCompleted) {
-                      resolve();
-                  } else {
-                      requestAnimationFrame(doAnimation);
-                  }
-              };
-
-              const startTime = Date.now();
-              requestAnimationFrame(doAnimation);
-          });
-      },
-      finish() {
-          this.isCompleted = true;
-          this.progress = 100;
-      }
-  }
-};
-</script>
-
-<div class="progress" :style="{width, height}">
-  <svg viewBox="0 0 96 96" class="svg-circle-progress" style="width: 96px; height: 96px;">
-      <circle r="40" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="10" class="svg-progress"
-          style="stroke-dasharray: 275, 279.602;stroke:#eee;">
-      </circle>
-      <circle r="40" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="10"
-          class="svg-progress"
-          :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`">
-      </circle>
-  </svg>
-  <div class="mask">
-{{ progress}}%
-</div>
-</div>
-<script setup>
-import { ref, toRefs, watch } from 'vue'
-
-const props = defineProps({
-  progress: {
-      type: Number,
-      default: () => 20
-  },
-  color: {
-      type: String,
-      default: () => "#FFAFAF"
-  },
-  width: {
-      type: String,
-      default: () => "210px"
-  },
-  height: {
-      type: String,
-      default: () => "100px"
-  },
-})
-const { height, width, color, progress } = toRefs(props)
-const progressValue = ref((progress.value / 100) * 250)
-
-watch(progress, (newValue) => {
-  progressValue.value = (newValue / 100) * 250
-})
-
-</script>
-<style lang="css" scoped>
-.progress {
-  display: inline-block;
-  position: relative;
-  height: 100px;
-  text-align: center;
-}
-.svg-circle-progress {
-  position: relative;
-  transform: rotate(-90deg);
-}
-.svg-progress {
-  stroke: #2196f3;
-  stroke-linecap: round;
-  transition: all .3s linear;
-}
-</style>
-

package/canvas-demo-master/canvas-demo-master/README.md

@@ -1,7 +0,0 @@
-# canvas-demo
-> 一些canvas练习的效果图
-
-----------------------------------
-
-> countShowBall		-- 小球时钟动画  
-> write				-- 毛笔字帖

package/canvas-demo-master/canvas-demo-master/countShowBall/README.md

@@ -1,7 +0,0 @@
-# 小球时钟动画
-
-使用canvas绘图技术，做出小球爆散的倒计时效果   
-[在线演示](http://zjy.space/canvas-demo/countShowBall/)  
-
-## 效果图
-![](http://i2.piimg.com/09c4035bd029e227.png)