Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how Vue uses Canvas to generate random sizes without overlapping circles". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Case complete code

This example is implemented with vue. Other methods are similar to vue, and the effect can be achieved by changing the corresponding syntax.

The case uses vue parent-child components to pass values.

Parent component code import CircleBox from'@ / components/content/circle/Circle.vue'export default {components: {CircleBox}, data () {return {parentClientWidth: 0, parentClientHeight: 0, / / canvas Simulation data dataList: [{follow: 1, image: 'http://39.99.139.115/demo/RB5.png'} {follow: 2, image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 3, image:' http://39.99.139.115/demo/RB5.png'}, {follow: 4 Image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 5, image:' http://39.99.139.115/demo/RB5.png'}, {follow: 6, image: 'http://39.99.139.115/demo/RB5.png'} {follow: 7, image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 8, image:' http://39.99.139.115/demo/RB5.png'}, {follow: 9 Image: 'http://39.99.139.115/demo/RB5.png'}, {follow: 10, image:' http://39.99.139.115/demo/RB5.png'}],} }, created () {}, mounted () {this.getWidth ();}, methods: {/ / get the width and height of the parent box getWidth () {this.parentClientWidth = this.$refs.tags.clientWidth; this.parentClientHeight = this.$refs.tags.clientHeight; console.log (this.$refs.tags.clientWidth);},},} The subcomponent code export default {/ / receives data props: ['parentClientWidth',' parentClientHeight', 'dataList'], data () {return {dataListCopy: this.dataList}}, created () {this.$nextTick (() = > {/ / initializing this.circleInfo ()})}, mounted () {} Methods: {circleInfo () {let that = this class Circle {constructor (x, y, r, color) {this.x = x this.y = y this.r = r this.c = color? Color: this.getRandomColor ()} / / Random Color getRandomColor () {let r = Math.floor (Math.random () * 100) + 155 let g = Math.floor (Math.random () * 100) + 155 let b = Math.floor (Math.random () * 100) + 155 return `rgb (${r}, ${g}) ${b}) `} class RandomCircle {constructor (obj) {this.c = document.getElementById (obj.id) console.log (this.c) this.ctx = this.c.getContext ('2d') this.dWidth = this.c.width this.dHeight = this.c.height this.fix = obj.fix | | true This.minMargin = obj.minMargin | | 20 this.minRadius = obj.minRadius | | 30 this.radiuArr = obj.radiuArr | | [30 30, 30, 30, 30, 30, 30, 30, 30] this.total = obj.total | | 10 this.circleArray = [] this.circleNumber = 1} drawOneCircle (c, index) {/ / console.log (c) Index) let ctx = this.ctx ctx.beginPath () ctx.strokeStyle = c.c ctx.fillStyle = c.c / / draw a circle ctx.arc (c.x, c.y, c.r, 0 2 * Math.PI) ctx.stroke () ctx.fill () / / ctx.textAlign = 'center' / / ctx.textBaseline =' middle' / / ctx.fillStyle = 'black' / / ctx.font =' 1rem Microsoft Jacob'/ / ctx.fillText (that.dataListCopy.follow, c.x Image ctx.drawImage (img, c.x-c.r, c.y-c.r, c.r * 2, c.r * 2) this.circleNumber++} check (x, y, r) {return! (x + r > this.dWidth | | x-r

< 0 || y + r >

This.dHeight | | y-r

< 0) } // 获取一个新圆的半径，主要判断半径与最近的一个圆的距离 getR(x, y) { if (this.circleArray.length === 0) return Math.floor(Math.random() * 20 + 20) let lenArr = this.circleArray.map((c) =>

{let xSpan = c.x-x let ySpan = c.y-y return Math.floor (Math.sqrt (Math.pow (xSpan, 2) + Math.pow (ySpan, 2))-c.r}) let minCircleLen = Math.min (... lenArr) let minC = this.CircleArray [lenArr.indexOf (minCircleLen)] let tempR = this.fix? This.radiuArr [this.circleArray.length]: minCircleLen-this.minMargin let bool = this.fix? TempR = this.minRadius return bool? TempR: false} / / generate a circle and randomly generate the center. / / if the radius is not suitable for 200 times in a row Terminate the process createOneCircle () {let x, y, r let createCircleTimes = 0 while (true) {createCircleTimes++ x = Math.floor (Math.random () * this.dWidth) y = Math.floor (Math.random () * this.dHeight) let TR = this.getR (x Y) if (! TR) {continue} else {r = TR} if (this.check (x, y, r) | | createCircleTimes > 200) {break}} this.check (x, y, r) & & this.circleArray.push (new Circle (x, y) R))} / / if you fail to generate a new circle 100 times Termination plan. / / if none of the 100 scenarios are properly available, terminate the process. Init () {let n = 0 while (this.circleArray.length

< this.total) { this.circleArray = [] let i = 0 while (this.circleArray.length < this.total) { this.createOneCircle() i++ if (i >

{break}} n > if (n > 100) {break}} / / draw a circle from large to small according to the radius. This.circleArray .sort ((a, b) = > b.r-a.r) .forEach ((c, index) = > {this.drawOneCircle (c, index)})}} / / console.log (this.circle) Const p = new RandomCircle ({id: 'myCanvas', total: that.dataListCopy.length / / configuration quantity}) p.init () console.log (p) console.log (p.circleArray)}} "how Vue uses Canvas to generate randomly sized circles without overlapping circles" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.