气泡随机分布界面的实现

最新推荐文章于 2023-07-15 03:02:33 发布
最新推荐文章于 2023-07-15 03:02:33 发布
阅读量4.5k 收藏 7
点赞数 6
分类专栏： 移动开发 文章标签： 界面 android 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amurocrash/article/details/45369843
版权

        废话不多说，最近需求要实现一个这样的界面，如下图：


        整体界面要求为气泡大致位置在屏幕某个区域，总数固定为8个，但圆心本身位置在该区域内随机，气泡半径，背景色也随机。然后界面展示时有一个漂浮出来的动画效果，气泡之间可以有遮挡但不可以挡住字，点击换一批的时候，重复以上所述动画效果，所有随机值刷新。

        先做一个圆形的带阴影的ImageView：代码如下

package com.amuro.ballonlayout;

import com.nineoldandroids.animation.Animator;
import com.nineoldandroids.animation.Animator.AnimatorListener;
import com.nineoldandroids.animation.AnimatorSet;
import com.nineoldandroids.animation.ObjectAnimator;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.util.AttributeSet;
import android.widget.ImageView;
import android.widget.RelativeLayout.LayoutParams;

public class BallonImageView extends ImageView
{
	private static final int SHADOW_RATIO = 14;
	
	private Paint paintBkg;
	private Paint paintText;
	
	public BallonImageView(Context context)
	{
		this(context, null);
	}
	
	public BallonImageView(Context context, AttributeSet attrs)
	{
		this(context, attrs, 0);
	}

	public BallonImageView(Context context, AttributeSet attrs, int defStyleAttr)
	{
		super(context, attrs, defStyleAttr);
		init();
	}
	
	private void init()
	{
		paintBkg = new Paint();
		paintText = new Paint();
		
		
        paintBkg.setStyle(Paint.Style.FILL);  
        paintBkg.setAntiAlias(true);
        
        paintText.setColor(Color.WHITE);
        paintText.setStyle(Paint.Style.STROKE);
        paintText.setAntiAlias(true);
	}

	@Override
	protected void onDraw(Canvas canvas)
	{
		super.onDraw(canvas);
		
		drawShadow(canvas);
		drawCircleBkg(canvas);
		drawText(canvas);
	}
	
	private void drawShadow(Canvas canvas)
	{
		int viewWidth = getWidth();
		int offsetX = viewWidth / SHADOW_RATIO;
		
		int cx = (viewWidth + offsetX) / 2;
		int cy = cx;
		int radius = (viewWidth - offsetX) / 2;
		
		paintBkg.setColor(Color.parseColor("#E1E1E1"));
		
        canvas.drawCircle(cx, cy, radius, paintBkg);
	}
	
	private void drawCircleBkg(Canvas canvas)
	{
		int viewWidth = getWidth();
		int offsetX = viewWidth / SHADOW_RATIO;

		
		int cx = (viewWidth - offsetX) / 2;
		int cy = cx;
		int radius = cx;
		
		paintBkg.setColor(bkgColor);
        canvas.drawCircle(cx, cy, radius, paintBkg);
		
	}

	private void drawText(Canvas canvas)
	{
		int viewWidth = getWidth();
		int offsetX = viewWidth / SHADOW_RATIO;

		int cx = (viewWidth - offsetX) / 2;
		int cy = cx;
	
		int textSize = getWidth() / 5;
		
		paintText.setTextSize(textSize);
		float textWidth = paintText.measureText(text);
		
		FontMetrics fm = paintText.getFontMetrics();
		int textHeight = (int) Math.ceil(fm.descent - fm.top) + 2;
		
		canvas.drawText(text, cx - (textWidth / 2), cy + (textHeight / 4), paintText);
		
	}

	private String text = "测试测试";
	private int bkgColor = Color.BLACK;
	
	public void setBkgColorAndText(int bkgColor, String text)
	{
		this.bkgColor = bkgColor;
		this.text = text;
		invalidate();
	}
	
	public void setRadius(int radius)
	{
		int diameter = radius * 2;
		LayoutParams params = new LayoutParams(diameter, diameter);
		setLayoutParams(params);
	}
	
	public void floatToPosition(int startX, int startY, int toX, int toY, int duration)
	{
	    AnimatorSet set = new AnimatorSet();
	    set.playTogether(
	    		ObjectAnimator.ofFloat(this, "translationX", startX, toX).setDuration(duration),
	    		ObjectAnimator.ofFloat(this, "translationY", startY, toY).setDuration(duration),
	    		ObjectAnimator.ofFloat(this, "scaleX", 0f, 1f),
	    		ObjectAnimator.ofFloat(this, "scaleY", 0f, 1f));
	    set.setDuration(duration).start();
	    set.addListener(new AnimatorListener()
		{
			
			@Override
			public void onAnimationStart(Animator arg0)
			{
				setEnabled(false);
			}
			
			@Override
			public void onAnimationRepeat(Animator arg0)
			{
				
			}
			
			@Override
			public void onAnimationEnd(Animator arg0)
			{
				setEnabled(true);
			}
			
			@Override
			public void onAnimationCancel(Animator arg0)
			{
				
			}
		});
	}

}


         BallonImageView主要做三件事 画气泡，画阴影，画字，画好之后还对外提供一个漂浮的动画的函数，本来这个函数我写在Activity里让Activity自己控制的，后来想想根据

单一职责，气泡自己的浮动效果是它自己逻辑，所以应该是它自己对外暴露方法，否则其他Activity需要这个动画效果的时候，就会产生重复代码了。

        下面设置一个BallonLayout来放置这些气泡，逻辑比较复杂，大家自己看代码吧，写得好蛋疼……

package com.amuro.ballonlayout;

import java.util.Random;

import com.amuro.balloonlayout.R;
import com.amuro.utils.DisplayUtils;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;

public class BallonLayout extends FrameLayout
{
	private static final int BALLON_COUNT = 8;
	private static final String[] ballonColors = {
		"#f29b76", "#84ccc9", "#f8b551", "#88abda", "#89c997", "#eb6877", "#f39800", "#aa89bd"
	};
	
	/***********监听器相关***************/
	private OnBallonClickListener onBallonClickListener;
	
	public interface OnBallonClickListener
	{
		public void onBallonClick(int id);
	}
	
	public void setOnBallonClickListener(OnBallonClickListener onBallonClickListener)
	{
		this.onBallonClickListener = onBallonClickListener;
	}
	
	private void notifyListener(int id)
	{
		if(this.onBallonClickListener != null)
		{
			this.onBallonClickListener.onBallonClick(id);
		}
	}
	
	/***********界面相关******************/
	private Random random;
	
	//全局值
	private int displayWidth;
	private int ballonFloatStartX;
	private int ballonFloatStartY;
	
	//过渡值
	private int imageView1NowYUsed;
	private int imageView3ToX;
	private int imageView3Radius;
	
	private BallonImageView imageView1;
	private BallonImageView imageView2;
	private BallonImageView imageView3;
	private BallonImageView imageView4;
	private BallonImageView imageView5;
	private BallonImageView imageView6;
	private BallonImageView imageView7;
	private BallonImageView imageView8;
	
	public BallonLayout(Context context, AttributeSet attrs)
	{
		super(context, attrs);
		LayoutInflater.from(context).inflate(R.layout.ballon_layout, this);
		initPoints();
		initView();
	}

	private void initPoints()
	{
		random = new Random();
		
		displayWidth = DisplayUtils.getDisplayWidth(getContext());
		ballonFloatStartX = DisplayUtils.getDisplayWidth(getContext()) / 2;
		ballonFloatStartY = DisplayUtils.getDisplayHeight(getContext());
	}

	private void initView()
	{
		imageView1 = (BallonImageView)findViewById(R.id.iv1);
		imageView2 = (BallonImageView)findViewById(R.id.iv2);
		imageView3 = (BallonImageView)findViewById(R.id.iv3);
		imageView4 = (BallonImageView)findViewById(R.id.iv4);
		imageView5 = (BallonImageView)findViewById(R.id.iv5);
		imageView6 = (BallonImageView)findViewById(R.id.iv6);
		imageView7 = (BallonImageView)findViewById(R.id.iv7);
		imageView8 = (BallonImageView)findViewById(R.id.iv8);
		
		imageView1.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(0);
				
			}
		});
		
		imageView2.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(1);
				
			}
		});
	
		imageView3.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(2);
			}
		});
	
		imageView4.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(3);
			}
		});
		
		imageView5.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(4);
			}
		});
		
		imageView6.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(5);
			}
		});
	
		imageView7.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(6);
			}
		});
		
		imageView8.setOnClickListener(new OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				notifyListener(7);
			}
		});
	}
	
	public void setView(String[] ballonNames)
	{
		getNonredundantArray();
		
		setImageView1(ballonNames[0]);
		setImageView2(ballonNames[1]);
		setImageView3(ballonNames[2]);
		setImageView4(ballonNames[3]);
		setImageView5(ballonNames[4]);
		setImageView6(ballonNames[5]);
		setImageView7(ballonNames[6]);
		setImageView8(ballonNames[7]);
	}
	
	private void setImageView1(String ballonName)
	{
		int toX = getBallonToX(displayWidth / 16, displayWidth / 8);
		int radius = getBallon1Radius(toX);
		imageView1.setRadius(radius);
		imageView1.setBkgColorAndText(getRandomColor(0), ballonName);
		imageView1.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, 100, getRandomDuration());
		
		imageView1NowYUsed = radius * 2 + 100;
	}
	
	private int getBallon1Radius(int toX)
	{	
		int maxRadius = (displayWidth / 2 - toX) / 2;
		int radius = (int) (maxRadius * getRadiusRange(0.8f, 0.85f));
		return radius;
	}
	
	private void setImageView2(String ballonName)
	{
		int toX = getBallonToX((displayWidth / 8) * 5, (displayWidth / 4) * 3);
		int radius = getBallon2Radius(toX);
		imageView2.setRadius(radius);
		imageView2.setBkgColorAndText(getRandomColor(1), ballonName);
		imageView2.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, 40, getRandomDuration());
		
	}
	
	private int getBallon2Radius(int toX)
	{
		int maxRadius = (displayWidth - toX) / 2;
		int radius = (int) (maxRadius * getRadiusRange(0.7f, 0.8f));
		return radius;
	}
	
	private void setImageView3(String ballonName)
	{
		imageView3ToX = getBallonToX((displayWidth / 16) * 5, (displayWidth / 16) * 7);
		imageView3Radius = getBallon3Radius();
		int toY = imageView1NowYUsed + 20;
		imageView3.setRadius(imageView3Radius);
		imageView3.setBkgColorAndText(getRandomColor(2), ballonName);
		imageView3.floatToPosition(ballonFloatStartX, ballonFloatStartY, imageView3ToX, toY, getRandomDuration());
		
		imageView1NowYUsed = toY + imageView3Radius * 2;
	}
	
	private int getBallon3Radius()
	{
		int maxRadius = displayWidth / 8;
		int radius = (int) (maxRadius * getRadiusRange(0.85f, 0.95f));
		return radius;
	}
	
	private void setImageView4(String ballonName)
	{
		int toX = getBallonToX(imageView3ToX + imageView3Radius * 2 + 30, (displayWidth / 4) * 3);
		int radius = getBallon4Radius();
		int toY = imageView1NowYUsed - imageView3Radius * 2;
		imageView4.setRadius(radius);
		imageView4.setBkgColorAndText(getRandomColor(3), ballonName);
		imageView4.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
	}
	
    private int getBallon4Radius()
	{
    	int maxRadius = (displayWidth / 16) * 3;
		int radius = (int) (maxRadius * getRadiusRange(0.8f, 0.95f));
		return radius;
	}

	private void setImageView5(String ballonName)
	{
		int toX = getBallonToX(displayWidth / 16, displayWidth / 8);
		int radius = getBallon3Radius();
		int toY = imageView1NowYUsed + 10;
		
		imageView5.setRadius(radius);
		imageView5.setBkgColorAndText(getRandomColor(4), ballonName);
		imageView5.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
		
		imageView1NowYUsed = imageView1NowYUsed + radius * 2;
	}

	private void setImageView6(String ballonName)
	{
		int toX = getBallonToX((displayWidth / 16) * 6, (displayWidth / 16) * 8);
		int radius = getBallon3Radius();
		int toY = imageView1NowYUsed - radius;
		
		imageView6.setRadius(radius);
		imageView6.setBkgColorAndText(getRandomColor(5), ballonName);
		imageView6.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
		
		imageView1NowYUsed = toY + radius * 2;
	}
	
	private void setImageView7(String ballonName)
	{
		int toX = getBallonToX((displayWidth / 16) * 11, (displayWidth / 16) * 12);
		int radius = getBallon3Radius();
		int toY = imageView1NowYUsed - radius;
		
		imageView7.setRadius(radius);
		imageView7.setBkgColorAndText(getRandomColor(6), ballonName);
		imageView7.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
		
		imageView1NowYUsed = toY + radius * 2;
	}
	
	private void setImageView8(String ballonName)
	{
		int toX = getBallonToX(displayWidth / 8, (displayWidth / 16) * 4);
		int radius = getBallon8Radius();
		int toY = imageView1NowYUsed - radius;
		
		imageView8.setRadius(radius);
		imageView8.setBkgColorAndText(getRandomColor(7), ballonName);
		imageView8.floatToPosition(ballonFloatStartX, ballonFloatStartY, toX, toY, getRandomDuration());
	}
	
	private int getBallon8Radius()
	{
		int maxRadius = (displayWidth / 24) * 4;
		int radius = (int) (maxRadius * getRadiusRange(0.8f, 0.95f));
		return radius;
	}
	
	private int getBallonToX(int start, int end)
	{
		int toX = random.nextInt(end);
		
		if(toX < start)
		{
			toX = start;
		}
		
		return toX;
	}
	
	private float getRadiusRange(float minRange, float maxRange)
	{
		float range = random.nextFloat();
		
		if(range <= minRange)
		{
			range = minRange;
		}
		
		if(range >= maxRange)
		{
			range = maxRange;
		}
		
		return range;
	}

	private int[] colorIndex = new int[BALLON_COUNT];
	private int getRandomColor(int index)
	{
		return Color.parseColor(ballonColors[colorIndex[index]]);
	}
	
	private int getRandomDuration()
	{
		float seconds = (random.nextInt(50) + 51) / 100f;
		return (int) (seconds * 2000);
	}
	
	private void getNonredundantArray()
	{

		// 初始化备选数组
		int[] defaultNums = new int[BALLON_COUNT];

		for (int i = 0; i < defaultNums.length; i++)
		{
			defaultNums[i] = i;
		}

		// 默认数组中可以选择的部分长度
		int canBeUsed = BALLON_COUNT;
		// 填充目标数组
		for (int i = 0; i < colorIndex.length; i++)
		{
			// 将随机选取的数字存入目标数组
			int index = random.nextInt(canBeUsed);
			colorIndex[i] = defaultNums[index];
			// 将已用过的数字扔到备选数组最后，并减小可选区域
			swap(index, canBeUsed - 1, defaultNums);
			canBeUsed--;
		}

	}
	
	private void swap(int i, int j, int[] nums)
	{
		int temp = nums[i];
		nums[i] = nums[j];
		nums[j] = temp;
	}

}


        其中的getNonredundantArray()通过洗牌算法，保证每次生成一个1-8不重复的随机数组，然后再从颜色数组中选择出不同的颜色。监听器的目的是告诉监听者哪个气泡被点击了~ 最终代码实现效果如下：

         还真是没在网上找到类似的demo或者例子，算是一次纯原创的尝试吧，谢谢各位观赏~

amurocrash
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
canvas绘制随机移动的气泡
hb707934728的博客
03-30 3661
Bouncing Balls body { background: #dddddd; } #canvas { margin-left: 10px; margin-top: 10px; background: #ffffff;
js实现可爱的气泡特效
10-14
在JavaScript编程中，创建动态和有趣的用户界面效果是吸引用户注意力和提升用户体验的重要方式之一。本文将详细解析如何使用JS实现可爱的气泡特效，通过这段代码我们可以了解到如何利用HTML5的Canvas API绘制并动画...
JS_固定区域内的不重叠随机圆，随机气泡，固定区域、不重叠、随机圆，半径固定、半径随机
小歪博客
04-07 753
关键词：js、固定区域、不重叠、随机圆，半径固定、半径随机 需求在一个固定的区域（500X500）内显示10个圆，且半径固定，而且不重叠 因为圆的个数固定，而且半径固定，那么就有可能会没有解决方案。 不过其实也没有很难，处理好半径的最大值就好了。思路： 固定半径随机半径
（arcade）随机泡泡
Jessicakkkkk的博客
01-16 459
from arcade import * # 设置窗体宽和高 SCREEN_WIDTH = 600 SCREEN_HEIGHT = 800 # 设置窗体标题 SCREEN_TITLE = "随机泡泡" class Bubble(): def __init__(self): self.x = 0 self.y = 0 self.radius = 0 self.color = color.SKY_BLUE class MyGam.
前端做一个简单的随机气泡（随机大小，随机颜色，随机方向，随机速度，透明度改变）的静态网页
AaronLee_1310的博客
04-05 3576
话不多说直接代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body { overf...
5种JS随机移动气泡效果
06-06 1063
这些5个JS随机运动气泡影响显示凉爽动画与在JavaScript / jQuery的几行代码“泡沫”的效果。 去看一下！ 1. JS泡沫效应＃1 JS泡沫效应1 来源 演示 2. JS泡沫效应＃2 JS泡沫效应＃2 来源 演示 3. jQuery.movi​​ng气泡 创建这个jQuery插件让你可以轻松让物体走动您的网页 资源 4.气泡 图片现在可以去向上和向...
01 C语言实现动态气泡碰撞和移动的效果，小球碰撞，Win7气泡壁纸，碰撞算法
qq582880551的博客
01-29 1081
想要实现多气泡相互碰撞的效果；想着这种在Win7壁纸中早就实现的效果，网上应该能找到源码的，但是，事实是我并没有找到能在实际产品中使用的，成熟的源码，没有办法，只有自己写。一开始出现一堆相互不重叠的，大小不一的气泡；或者一开始气泡从底下或者侧面出现，然后方向有一些随机的不同；自然和符合物理规律的碰撞效果；使用windows api、c语言、vsWin32 API 编程 —— 前言。
前端不规则气泡图实现方案
CatCherry的博客
07-15 1045
由于项目大屏可视化的需求，需要实现在一个不定长宽的长方形容器中，实现不重叠分布的气泡图，每个气泡代表一类数据的统计值，气泡个数最大值已知，气泡大小与数据值大小正相关，并且气泡图需要有浮动特效，页面尺寸改变时，气泡尺寸需要自适应容器尺寸。
[Android实例] 水下气泡上升界面效果，和下降效果
06-15
本实例探讨的是如何实现一个独特的水下气泡上升和下降的界面效果。这个效果可以应用于各种场景，比如游戏、天气应用或者任何与水元素相关的UI设计。 首先，我们需要了解的是Android的动画系统。在Android中，有两种...
C语言实现气泡
01-17
在计算机编程中，这种效果通常是通过图形用户界面（GUI）实现的，但对于嵌入式系统，如基于S3C2440A的硬件平台，可能需要直接操作硬件接口来完成。 S3C2440A是一款由Samsung生产的ARM9微处理器，广泛应用于嵌入式...
android气泡列表
04-11
http://blog.csdn.net/xyz_lmn/article/details/6906331 这次实现的是像handcent sms或者chomp sms那样的气泡短信样式，也是iphone上的气泡聊天模式。实现这种效果的重点是ListView的divider和listSelector。
JS彩色气泡浮动动画特效
06-24
动画中的气泡随机产生和随机移动，这需要利用JavaScript的`Math.random()`函数生成随机数值。计算气泡的运动轨迹和速度也需要运用到基础的数学知识，如加减运算和向量概念。 7. **碰撞检测**： 虽然在描述中没有...
jQuery漂亮的气泡效果 随机头像显示
12-15
本文将深入探讨如何使用jQuery实现一个漂亮的气泡效果和随机头像显示的功能，这通常用于创建现代、时尚的用户界面。 首先，我们要理解jQuery中的“气泡效果”。这种效果通常指的是在鼠标悬停或移动时，元素周围出现...
不重叠且分布均匀的气泡图解决方案（基于echarts）
qq_34295211的博客
06-17 1万+
气泡图是数据可视化需求中的一种常见图表形式。然而截至目前，像echarts，d3，higncharts都还没有直接提供一个配置来完成不重叠且分布均匀的气泡图这项工作。幸运的是，我们可以通过配置echart的关系图来完成我们的气泡图需求。 下面是完成后的气泡图效果（数据加载后有一个动画效果，而且气泡支持拖动，下方动图不和谐的地方为鼠标拖动）： 最终稳定之后的效果如下： 为了有更好的适用性，这里把绘制气泡图的操作都封装到了一个函数里面。以Vue项目为例，要完...
【VUE3+AntV-G2】数据可视化 封装antv G2 气泡图组件
qq_48468636的博客
02-16 2532
将AntV-G2气泡图引入Vue3，封装成组件
布局属性笔记
balloon flowe的博客
03-13 387
线性布局（LinearLayout） android_orientation 用于控制控件的排列方向 默认值 ： vertical 垂直 layout_height="wrap_content" horizon...
Vue用svg生成随机圆 不同大小 不同颜色 位置不重叠
qq_40261044的博客
10-10 555
根据数组生成气泡，数量（数组控制）、大小（数组控制）、颜色随机、位置随机
Java常用加密技术和代码总结
热门推荐
amurocrash的专栏
07-15 1万+
Java常用加密技术和代码总结，还通过一些生活中容易理解的场景来解释算法复杂的逻辑。
cesium 实现气泡框
最新发布
08-08
Cesium是一个用于构建地理空间应用的开源JavaScript库。借助Cesium，可以通过在虚拟地球上加入各种元素，包括气泡框。 要实现一个气泡框，首先需要通过Cesium创建一个场景，并在场景中添加需要显示的实体或标记。可以使用Cesium的Entity对象或Marker对象来表示这些元素。然后，可以通过为每个实体或标记添加描述信息，将气泡框链接到相应的元素上。 在添加实体或标记时，可以为每个元素指定位置信息，例如经纬度或笛卡尔坐标。这样，当用户与虚拟地球交互时，可以根据元素的位置在相应的位置显示气泡框。 为了实现气泡框的显示效果，可以使用Cesium的Popup对象或自定义HTML元素来创建一个浮动的信息窗口。可以使用CSS样式定义气泡框的外观，例如背景颜色、边框和文本样式等。而且，Cesium提供了丰富的API来控制气泡框的显示位置、大小和内容。 要显示一个气泡框，可以在用户与元素交互时触发事件，例如当鼠标悬停在元素上或用户点击元素时。在事件处理程序中，可以根据元素的位置和描述信息，动态创建气泡框，并将其添加到场景中。在气泡框中，可以显示元素的详细信息，例如名称、描述、图标等。 总之，使用Cesium可以很方便地实现气泡框的效果。通过添加实体或标记，并使用Popup对象或自定义HTML元素，可以在虚拟地球上显示具有交互性的气泡框，以展示元素的详细信息。无论是构建地图应用还是可视化地理数据，Cesium都是一个强大的工具。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值