vue 固定范围内随机位置生成图片（可其他东西）

先说一下思路：

在一个范围内（主要是为了确认随机生成的图片中心点在范围内）
拿到图片半径（可随机，看需求）
随机生成xy坐标 (left,top)
第一个判断：判断是否在规定范围内
x (随机点的X) - r (半径) >=0 && y(随机点的Y)-r>=0
x+r<= W(范围宽) && y+r<=H (范围高)
判断最新生成的图片范围内是否有其他的图片
假设我们生成的图片集合成一个 list:[{x:150,y:90,r:30},{x:240,y:70,r:30}…]
最新的图片：x: 260,y: 140,r:60

for(var i in list){if(list[i].x>=260&&list[i].x<=260+2*60){return false}if(list[i].y>=260&&list[i].y<=260+2*60){return false}
}

如果没有返回false,就把他丢到 list里面，即又生成一个。

开始实现
html

<div class="component" :style="`width:${clientWidth}px;height:${clientHeight}px;`"><template v-for="(item,index) in graphicsList"><div class="graphics" :key="index" :style="`left:${item.x}px;top:${item.y}px;`"><img src=""></div></template></div>

data() {return {clientHeight: null,clientWidth: null,// 半径 即图片100*100radius: 50, // 有随机要求可动态生成graphicsList:[]};},methods: {//  获取可视区域getClient(){// 获取html可视区域高度this.clientHeight = document.documentElement.clientHeight - 100  // 预留100px不紧贴屏幕this.clientWidth = document.documentElement.clientWidth - 120  // 预留120px不紧贴屏幕},// 随机生成图形位置（xy坐标）generateLocation(){let x = Math.floor(Math.random()*this.clientHeight) + this.radius  // 加 this.radius 保证图形中心在范围内，后面可少判断一步let y = Math.floor(Math.random()*this.clientWidth) + this.radiusreturn {x,y,r: this.radius}},// 生成generate(){let obj = this.generateLocation()// 判断是否在规定范围内 if(obj.x + obj.r>this.clientHeight){return false}if(obj.y + obj.r>this.clientHeight){return false}// 判断最新生成的 图片 范围内是否 有其他的图片 if(this.graphicsList.length!==0){for(var i in list){// 判断是否在规定范围内 if(list[i].x>= obj.x && list[i].x<= obj.x + (obj.r*2)){return false}if(list[i].y>= obj.x && list[i].y<= obj.x + (obj.r*2)){return false}if(Number(i)+1==list.length){this.graphicsList.push(obj)}}}else{this.graphicsList.push(obj)}},},

scss

.component {position: absolute;.demo {width: 100px;height: 100px;position: absolute;z-index: 2;img {position: relative;object-fit: contain;width: 100px;height: 100px;}}
}

vue 固定范围内随机位置生成图片（可其他东西）相关推荐

随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用
目录先看看效果图所要实现的功能看看代码 js代码讲解: 下面看看完整代码吧小程序版本完整代码 VUE版本的代码: 先看看效果图所要实现的功能在页面上随机的位置显示随机大小的图片,并且每个图 ...
C#全屏随机位置显示图片的小程序
想法:将屏幕截图作为程序背景图,在之上弹出提示窗口,选择确定后进行定时图片随机位置显示.(支持ESC键退出) 需要添加的控件:Timer 需要修改的Form1属性为下图红色区域: 资源文件的添加:添加 ...
java 在某个范围内随机_java生成某个范围内的随机时间
Date randomDate=randomDate("2010-09-20","2010-09-21"); /** * 生成随机时间 * @param beg ...
随机位置生成小方块案例
每一秒改变所有小方块的颜色和位置,效果如图 html代码很简单,就是一个容器以及十个小方块 ```javascript <div id = 'container'></div> ...
vue框架行内样式添加背景图片
<div class="logo" :style="{width: concetWidth+'px',height: concetHeight+'px' , 'ba ...
Android屏幕随机位置弹出View
最近项目中人脸注册需要尽量多的捕捉人脸特征,就要想办法使得人脸在注册中呈现不同角度,于是想到在屏幕内随机位置弹出一个吸引注意力的View. 本文中主要用到: 1.view.setX();setY()方 ...
Actor范围内随机生成 Learn Unreal Engine (with C++)
Actor范围内随机生成 Learn Unreal Engine (with C++) SpaceshipBattle · fanxingin/UE4项目 - 码云 - 开源中国 (gitee.com ...
用 Python 自动生成 Word 文档并在指定位置插入图片
用Python生成Word文档在指定位置插入图片首先当然需要第三方库啦(▽) 天才第一步,第三方的库O(∩_∩)O哈哈~ 参照转发的是这位大佬的博客:https://blog.csdn.net/c ...
vue组件读取static文件夹内json文件的图片路径问题
static是放置静态文件的地方,可以我们也会把json文件放在里面,但是经常我们会遇到读取josn文件内图片路径的问题,这个问题困了我两天,今天一大早就又开始研究这个问题,现在终于得到了解决,关于这 ...

vue 固定范围内随机位置生成图片（可其他东西）

vue 固定范围内随机位置生成图片（可其他东西）

vue 固定范围内随机位置生成图片（可其他东西）相关推荐

最新文章

热门文章

vue 固定范围内随机位置生成 图片（可其他东西）

vue 固定范围内随机位置生成 图片（可其他东西）

vue 固定范围内随机位置生成 图片（可其他东西）相关推荐

最新文章

热门文章

vue 固定范围内随机位置生成图片（可其他东西）

vue 固定范围内随机位置生成图片（可其他东西）

vue 固定范围内随机位置生成图片（可其他东西）相关推荐