可根据一个小圆点拖拽的圆环

效果展示 视频分辨率有限

安装依赖

npm i spritejs -S

新建vue文件draggble-circle.vue

<template>
  <div class="dragable-circle-wrapper"></div>
</template>

<script>
import circleDraggable from "@/utils/circle-dragabble";
export default {
   
  mounted() {
   
    this.$nextTick(() => {
   
      new circleDraggable({
   
        container: '.dragable-circle-wrapper'
      })
    });
  }
};
</script>

<style lang="scss">
.dragable-circle-wrapper {
   
  width: 20vw;
  height: 20vw;
  margin: 50px auto;
  canvas {
   
    background: #666;
    cursor: pointer;
  }
}
</style>

编写可拖拽圆环代码

import {
    Scene, Ring, Arc } from "spritejs"
export default class circleDraggable {
   
  constructor(options) {
   
    this.options = Object.assign({
   }, {
   
      basicCircleFillColor: "#c0c0c0",
      basicCircleStartAngle: 0,
      basicCircleEndAngle: 360,
      outerCircleFillColor: "#f15a4a",
      outerCircleStartAngle: 0,
      dragCircleRadius: 25,
      dragCircleFillColor: "#f15a4a",
      lineWidth: 30,
      dragCircleAngle: 60,
      dragSmallArcFillColor: "#fff"
    }, options)
    this.init()
  }
  init() {
   
    this.container = document.querySelector(this.options.container)
    this.width = this.container.clientWidth
    this