Vue verwendet Canvas, um Kreise zufälliger Größe und ohne Überlappung zu erzeugen

<Vorlage>
  <div id="Startseite">
      <div Klasse="Tags" ref="Tags">
        <circle-box :parentClientWidth="parentClientWidth" :parentClientHeight="parentClientHeight" :dataList="dataList"></circle-box>
      </div>
  </div>
</Vorlage>

<Skript>
CircleBox aus '@/components/content/circle/Circle.vue' importieren
Standard exportieren {
  Komponenten: { CircleBox },
  Daten() {
    zurückkehren {
      parentClientWidth: 0,
      übergeordneterClientHeight: 0,
      // Canvas-Simulationsdaten dataList: [
       {
          folgen: 1,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 2,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 3,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 4,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 5,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 6,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 7,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 8,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 9,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        },
        {
          folgen: 10,
          Bild: 'http://39.99.139.115/demo/RB5.png'
        }
      ],
    };
  },
  
  erstellt() {},
  
  montiert() {
    dies.getWidth();
  },
  
  Methoden: {
    // Breite und Höhe der übergeordneten Box ermitteln getWidth() {
      diese.parentClientWidth = diese.$refs.tags.clientWidth;
      this.parentClientHeight = this.$refs.tags.clientHeight;
      Konsole.log(diese.$refs.tags.clientWidth);
    }
  },
};
</Skript>

<Vorlage>
  <div>
    <canvas id="myCanvas" :width="Breite des übergeordneten Clients + 'px'" :height="Höhe des übergeordneten Clients + 'px'"></canvas>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  // Dateneigenschaften empfangen: ['parentClientWidth', 'parentClientHeight', 'dataList'],

  Daten() {
    zurückkehren {
      Datenliste kopieren: diese.Datenliste
    }
  },
  
  erstellt() {
    dies.$nextTick(() => {
      // Initialisiere this.circleInfo()
    })
  },
  
  montiert() {},
  
  Methoden: {
    KreisInfo() {
      lass das = dies
      Klasse Kreis {
        Konstruktor(x, y, r, Farbe) {
          dies.x = x
          dies.y = y
          dies.r = r
          dies.c = Farbe? Farbe: dies.getRandomColor()
        }

        // Zufällige Farbe getRandomColor() {
          sei r = Math.floor(Math.random() * 100) + 155
          sei g = Math.floor(Math.random() * 100) + 155
          sei b = Math.floor(Math.random() * 100) + 155
          gibt `rgb(${r},${g},${b})` zurück
        }
      }

      Klasse Zufallskreis {
        Konstruktor(Objekt) {
          dies.c = document.getElementById(obj.id)
          konsole.log(dieses.c)

          dies.ctx = dies.c.getContext('2d')
          dies.dWidth = dies.c.width
          diese.dHöhe = diese.c.Höhe
          dies.fix = obj.fix || wahr

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

          dies.gesamt = obj.gesamt || 10

          dieses.circleArray = []
          diese.Kreisnummer = 1
        }

        zeichneEinenKreis(c, index) {
          // konsole.log(c, index)
          lass ctx = dies.ctx

          ctx.beginPath()

          ctx.strokeStyle = cc
          ctx.fillStyle = cc
          // Zeichne einen Kreis ctx.arc(cx, cy, cr, 0, 2 * Math.PI)

          ctx.stroke()
          ctx.fill()

          // ctx.textAlign = "Mitte"
          // ctx.textBaseline = "Mitte"

          // ctx.fillStyle = "schwarz"
          // ctx.font = '1rem Microsoft YaHei'
          // ctx.fillText(that.dataListCopy[index].follow, cx, cy - 10) // Text innerhalb des Kreises let img = new Image()
          img.src = das.dataListCopy[index].image
          ctx.drawImage(Bild, cx - cr, cy - cr, cr * 2, cr * 2)

          diese.circleNumber++
        }

        prüfen(x, y, r) {
          zurück !(x + r > diese.dBreite || x - r < 0 || y + r > diese.dHöhe || y - r < 0)
        }

        // Den Radius eines neuen Kreises ermitteln, hauptsächlich um die Distanz zwischen dem Radius und dem nächsten Kreis zu ermitteln getR(x, y) {
          wenn (this.circleArray.length === 0) returniere Math.floor(Math.random() * 20 + 20)

          lass lenArr = dieses.circleArray.map((c) => {
            sei xSpan = cx - x
            sei ySpan = cy - y

            gibt Math.floor(Math.sqrt(Math.pow(xSpan, 2) + Math.pow(ySpan, 2))) zurück - cr
          })

          lass minCircleLen = Math.min(...lenArr)
          lass minC = dieses.circleArray[lenArr.indexOf(minCircleLen)]
          let tempR = this.fix ? this.radiuArr[this.circleArray.length] : minCircleLen - this.minMargin
          let bool = this.fix ? tempR <= minCircleLen - minC.r : tempR >= this.minRadius

          bool zurückgeben? tempR: false
        }

        //Erstellen Sie einen Kreis mit einem zufällig generierten Mittelpunkt.
        // Wenn der Radius nach 200 aufeinanderfolgenden Generierungen nicht passt, beende den Prozess createOneCircle() {
          sei x, y, r
          let createCircleTimes = 0

          während (wahr) {
            Erstellen Sie CircleTimes++
            x = Math.floor(Math.random() * this.dWidth)
            y = Math.floor(Math.random() * this.dHeight)

            sei TR = this.getR(x, y)
            wenn (!TR) {
              weitermachen
            } anders {
              r = TR
            }
            wenn (this.check(x, y, r) || createCircleTimes > 200) {
              brechen
            }
          }

          dies.check(x, y, r) und dies.circleArray.push(neuer Kreis(x, y, r))
        }

        // Wenn das Generieren neuer Kreise 100-mal fehlschlägt, beenden Sie das Schema.
        //Wenn keine der 100 generierten Lösungen passt, beenden Sie den Vorgang.
        init() {
          sei n = 0

          während (dieses.circleArray.length < dieses.total) {
            dieses.circleArray = []

            sei i = 0
            während (dieses.circleArray.length < dieses.total) {
              dies.createOneCircle()
              ich++
              wenn (i >= 100) {
                brechen
              }
            }

            n++

            wenn (n > 100) {
              brechen
            }
          }

          //Zeichnen Sie Kreise vom großen zum kleinen, entsprechend dem Radius.
          dieses.circleArray
            .sort((a, b) => br - ar)
            .forEach((c, index) => {
              dies.drawOneCircle(c, index)
            })
        }
      }
      // konsole.log(dieser.kreis);

      const p = neuer Zufallskreis({
        ID: "myCanvas",
        total: that.dataListCopy.length //Konfigurationsmenge})

      p.init()
      konsole.log(p)
      Konsole.log(p.circleArray)
    }
  }
}
</Skript>