VueはCanvasを使用してランダムなサイズで重なり合わない円を生成します

<テンプレート>
  <div id="ホーム">
      <div class="タグ" ref="タグ">
        <circle-box :parentClientWidth="親クライアントの幅" :parentClientHeight="親クライアントの高さ" :dataList="データリスト"></circle-box>
      </div>
  </div>
</テンプレート>

<スクリプト>
'@/components/content/circle/Circle.vue' から CircleBox をインポートします。
エクスポートデフォルト{
  コンポーネント: { CircleBox },
  データ（） {
    戻る {
      親クライアント幅: 0,
      親クライアントの高さ: 0,
      // キャンバスシミュレーションデータ dataList: [
       {
          フォロー: 1,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 2,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 3,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 4,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 5,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 6,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 7,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 8,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 9,
          画像: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          フォロー: 10,
          画像: 'http://39.99.139.115/demo/RB5.png'
        }
      ]、
    };
  },
  
  作成された() {},
  
  マウント() {
    this.getWidth();
  },
  
  メソッド: {
    // 親ボックスの幅と高さを取得する getWidth() {
      this.parentClientWidth = this.$refs.tags.clientWidth;
      this.parentClientHeight = this.$refs.tags.clientHeight;
      console.log(this.$refs.tags.clientWidth);
    }
  },
};
</スクリプト>

<テンプレート>
  <div>
    <canvas id="myCanvas" :width="親クライアントの幅 + 'px'" :height="親クライアントの高さ + 'px'"></canvas>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  // データを受け取る props: ['parentClientWidth', 'parentClientHeight', 'dataList'],

  データ（） {
    戻る {
      dataListコピー: this.dataList
    }
  },
  
  作成された() {
    this.$nextTick(() => {
      // this.circleInfo() を初期化する
    })
  },
  
  マウント() {},
  
  メソッド: {
    サークル情報() {
      それを = これとする
      クラス Circle {
        コンストラクタ(x, y, r, 色) {
          this.x = x
          this.y = y
          r = r です
          this.c = 色 ? 色: this.getRandomColor()
        }

        // ランダムカラー getRandomColor() {
          r = Math.floor(Math.random() * 100) + 155 とします。
          g = Math.floor(Math.random() * 100) + 155 とします。
          b = Math.floor(Math.random() * 100) + 155 とします。
          `rgb(${r},${g},${b})` を返す
        }
      }

      クラス RandomCircle {
        コンストラクタ(obj) {
          this.c = document.getElementById(obj.id)
          コンソールログ(this.c)

          this.ctx = this.c.getContext('2d')
          this.dWidth = this.c.width
          this.dHeight = this.c.height
          this.fix = obj.fix || 真

          this.minMargin = obj.minMargin || 20
          this.minRadius = obj.minRadius || 30
          this.radiuArr = obj.radiuArr || [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30]

          this.total = obj.total || 10

          this.circleArray = []
          this.circleNumber = 1
        }

        1つの円を描画します(c, インデックス) {
          // コンソール.log(c, インデックス)
          ctx = this.ctx とします。

          ctx.beginPath()

          ctx.strokeStyle = cc
          ctx.fillStyle = cc
          // 円を描く ctx.arc(cx, cy, cr, 0, 2 * Math.PI)

          ctx.ストローク()
          ctx.fill()

          // ctx.textAlign = 'center'
          // ctx.textBaseline = 'middle'

          // ctx.fillStyle = '黒'
          // ctx.font = '1rem Microsoft YaHei'
          // ctx.fillText(that.dataListCopy[index].follow, cx, cy - 10) // 円内のテキスト let img = new Image()
          img.src = that.dataListCopy[インデックス].image
          ctx.drawImage(img, cx - cr, cy - cr, cr * 2, cr * 2)

          this.circleNumber++
        }

        チェック(x, y, r) {
          戻り値 !(x + r > this.dWidth || x - r < 0 || y + r > this.dHeight || y - r < 0)
        }

        // 新しい円の半径を取得します。主に半径と最も近い円の間の距離を決定します。getR(x, y) {
          if (this.circleArray.length === 0) は Math.floor(Math.random() * 20 + 20) を返します

          lenArr = this.circleArray.map((c) => { とします。
            xSpan = cx - x とします。
            ySpan = cy - yとします

            Math.floor(Math.sqrt(Math.pow(xSpan, 2) + Math.pow(ySpan, 2))) - cr を返す
          })

          minCircleLen = Math.min(...lenArr) とします。
          minC = this.circleArray[lenArr.indexOf(minCircleLen)]とします。
          tempR = this.fix ? this.radiuArr[this.circleArray.length] : minCircleLen - this.minMargin とします。
          bool = this.fix ? tempR <= minCircleLen - minC.r : tempR >= this.minRadius とします。

          bool を返す ? tempR : false
        }

        // ランダムに生成された中心を持つ円を生成します。
        // 200回連続生成しても半径が適切でない場合は、プロセスを終了します createOneCircle() {
          x、y、rとします
          createCircleTimes = 0 とします

          （真）の間{
            サークルタイムを作成++
            x = Math.floor(Math.random() * this.dWidth)
            y = Math.floor(Math.random() * this.dHeight)

            TR = this.getR(x, y) とします。
            もし(!TR){
              続く
            } それ以外 {
              r = TR
            }
            if (this.check(x, y, r) || createCircleTimes > 200) {
              壊す
            }
          }

          this.check(x, y, r) && this.circleArray.push(新しいCircle(x, y, r))
        }

        // 新しい円の生成が 100 回失敗した場合は、スキームを終了します。
        // 生成された 100 個のソリューションのいずれも適切でない場合は、プロセスを終了します。
        初期化() {
          n = 0とする

          (this.circleArray.length < this.total) の間 {
            this.circleArray = []

            i = 0とする
            (this.circleArray.length < this.total) の間 {
              this.createOneCircle()
              私は++
              (i >= 100) の場合 {
                壊す
              }
            }

            ++ いいえ

            (n > 100)の場合{
              壊す
            }
          }

          // 半径に応じて大きい円から小さい円まで描きます。
          this.circleArray
            .sort((a, b) => br - ar)
            .forEach((c, インデックス) => {
              this.drawOneCircle(c, インデックス)
            })
        }
      }
      // コンソールにログ出力します。

      const p = 新しいランダムサークル({
        id: 'myCanvas',
        total: that.dataListCopy.length //構成数量})

      p.init()
      コンソールログ(p)
      コンソールログ(p.circleArray)
    }
  }
}
</スクリプト>