`
pyleaf
  • 浏览: 39225 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

简陋的动态仪表盘和进度条

    博客分类:
  • Flex
 
阅读更多

由于项目需要,要自己做一个仪表盘和一个进度条,于是用几个矩形模拟了一下,自己玩了一下,还不错

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 仪表盘转动 -->
		<s:Rotate id="rotater" angleTo="{sl.value}" duration="300" target="{rec}"/>
		<!-- 进度条走动 -->
		<s:Resize id="resizer" duration="300" target="{pb}" widthTo="{sl.value}"/>
	</fx:Declarations>
	<!-- 模拟仪表盘指针(关键在于设定正确的旋转中心 transformX,transformY) -->
	<s:Rect id="rec" x="100" y="100" width="100" height="20" transformX="90" transformY="10">
		<s:fill>
			<s:SolidColor color="#C0C0C0"/>
		</s:fill>
	</s:Rect>
	<!-- 进度条边框 -->
	<s:Rect x="100" y="150" width="182" height="10">
		<s:stroke>
			<s:SolidColorStroke color="#000000" weight="1"/>
		</s:stroke>
	</s:Rect>
	<!-- 进度条 -->
	<s:Rect id="pb" x="101" y="151" width="1" height="8">
		<s:fill>
			<s:SolidColor color="#F0F0F0"/>
		</s:fill>
	</s:Rect>
	<!-- 模拟数据加载 -->
	<s:HSlider id="sl" x="100" y="200" change="rotater.play();resizer.play()" liveDragging="true"
			   maximum="180" minimum="0"/>
</s:Application>
 

 


 
  • 大小: 1.2 KB
分享到:
评论

相关推荐

    android自定义环形进度条(类似仪表盘)

    本文将深入探讨如何在Android中实现一个自定义的环形进度条,它类似于汽车仪表盘中的速度表,可以展示某个任务的进度或者状态。我们将讨论以下几个关键知识点: 1. **自定义View的创建** 自定义环形进度条首先需要...

    wpf仪表盘、圆形进度条控件(修改后)

    在压缩包中的"dll"文件可能是包含了自定义控件库的DLL动态链接库,这使得开发人员可以直接引用并使用预定义的仪表盘和圆形进度条控件。"Example"文件可能是一个示例项目,展示了如何在实际应用中使用这些控件,包括...

    微信小程序仪表盘组件带刻度进度

    仪表盘组件的核心是通过视觉设计和动态效果来直观地展示数据变化。在微信小程序中,我们可以自定义创建这样的组件,或者利用官方提供的`progress`组件进行改造。下面我们将详细讨论如何实现这一功能。 首先,我们...

    Android 仪表盘与圆形进度条开发案例

    "Android 仪表盘与圆形进度条开发案例"提供了一个实例,展示了如何在Android平台上实现动态、交互式的仪表盘和圆形进度条组件。这些组件通常用于显示数据的进度或者表示某种状态,如电池电量、加载进度等。 一、...

    安卓进度条loadingprogress相关-android自定义环形进度条类似仪表盘.zip

    标题提到的"安卓进度条loadingprogress相关-android自定义环形进度条类似仪表盘",显然涉及到的是一个自定义环形进度条组件的实现,这通常用于显示任务的加载进度,比如数据下载或上传。在Android中,我们可以使用...

    安卓进度条loadingprogress相关-velocimeter-view仪表盘进度条.rar

    在给定的“安卓进度条loadingprogress相关-velocimeter-view仪表盘进度条.rar”资源中,包含的是一个特殊的进度条实现——velocimeter-view,即仪表盘样式的效果。这种进度条通常用来模拟汽车速度表、电量表等具有...

    html5 echarts汽车仪表盘图表动画特效

    ECharts中的仪表盘图表(Gauge Chart)可以模拟汽车仪表盘上的速度表、油量表等组件,提供实时、动态的数据显示。这种图表的特点是可以自由定制刻度、颜色范围、指针样式等,使其看起来更像真实的物理仪表。在“汽车...

    仪表盘进度条HTML5特效.zip

    【标题】"仪表盘进度条HTML5特效.zip"所包含的知识点主要集中在使用HTML5、CSS3以及可能涉及的JavaScript(如jQuery)技术来创建一个动态的、视觉吸引力强的仪表盘进度条效果。这种特效在现代网页设计中非常常见,...

    仪表盘进度条源码velocimeter-view.zip

    标签 "仪表盘进度条源码" 和 "velocimeter-view android源码" 重申了这个压缩包的核心内容,即它是一个实现了特定视觉效果的Android组件源代码,特别适用于需要展示进度或数据指标的应用场景,例如健康追踪、任务...

    可分割的环形进度条

    在IT界,界面设计的重要性不言而喻,它直接影响到用户体验和软件的易用性。在各种应用程序和界面上,进度条是一种常见的元素,用于显示任务的完成状态...合理利用和定制,可以为用户带来更加直观、生动的界面动态反馈。

    利用js模拟仪表盘的实现

    本文将深入探讨如何利用js创建一个交互式的仪表盘,并提供一些关键的技术点和步骤。 首先,我们要理解仪表盘的基本构成。一个典型的仪表盘通常包含指针、刻度、数值显示、背景等元素。在JavaScript中,我们可以使用...

    HTML5实现仪表盘进度条特效代码.zip

    总结来说,这个压缩包提供了一种使用HTML5、CSS3和JavaScript来创建动态仪表盘进度条的方法。这展示了现代Web开发的强大能力,使得开发者能够创造出富有互动性和视觉吸引力的用户体验,而不仅仅是静态的网页内容。...

    Winform仪表盘控件_C#_仪表盘_winform_

    "Winform仪表盘控件"就是一种专门用于此类目的的组件,它允许开发者在C#应用程序中构建动态、交互式的仪表盘界面。这个标题暗示了我们讨论的是一个用于Winform应用的特定类型控件,该控件设计用于显示数据指标,如...

    仪表盘进度条HTML5特效

    总结来说,"仪表盘进度条HTML5特效"利用HTML5 Canvas的绘图功能,构建了一个可自定义的、动态的进度条组件。开发者可以借此展示各种数据,同时提供互动性和视觉吸引力。通过深入理解并熟练运用Canvas API,我们可以...

    基于Qt的QML圆形进度条开源代码(兼容qml所有版本)

    例如,你可以动态地改变圆形进度条的值,从而更新UI。 QPainter是Qt库中的一个关键类,用于在各种图形表面(如窗口、图片或内存缓冲区)上进行2D图形绘制。在QML中,虽然大部分UI元素是声明式的,但有时候我们仍然...

    android 进度条渐进渐出、仪表盘旋转

    通过以上方法,我们可以为Android应用程序创建具有渐进渐出效果的进度条和动态旋转的仪表盘,提升用户体验。在实际项目中,这些组件可以结合具体的业务需求进行定制和优化,以满足多样化的视觉和交互需求。

    精美时尚的jQuery动态仪表盘插件

    GaugeMeter是基于jQuery的一款强大的仪表盘插件,专门用于创建各种类型的动态仪表盘,如全圆形、半圆形和拱圆形的进度条。这款插件的主要特点包括: 1. **高度可定制化**:GaugeMeter提供了丰富的参数设置,允许...

    Qt Qml圆形进度条动画(4分之3圆) 带进度条动画,类似汽车仪表盘动画

    在本文中,我们将深入探讨如何使用Qt的QML模块创建一个圆形进度条动画,特别是实现四分之三圆的进度指示器,同时带有类似于汽车仪表盘的动态效果。Qt是一个跨平台的应用程序开发框架,广泛应用于桌面、移动和嵌入式...

Global site tag (gtag.js) - Google Analytics