个人博客:狼之梦---爱乌及屋
今天项目需要,需要画虚线,后面看到一下API,AS中没有相关的API所以要自己实现,后面在网上查了一下相关资料,整了用鼠标可以画虚线的东东。
Flex中的代码(作表现用):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:line="cyou.line.*"
initialize="init()"
>
<mx:Script>
<![CDATA[
import cyou.line.DrawLine;
private var isDrawing:Boolean=false;
private var startP:Point=new Point();
private function drawLine(event:MouseEvent):void{
if(!isDrawing){
//第一次click开始记录开始点,开始画线
startP.x=event.localX;
startP.y=event.localY;
isDrawing=true;
}else{
isDrawing=false;
}
}
private function moveMouse(event:MouseEvent):void{
if(isDrawing){
panel.graphics.clear();
var endP:Point=new Point(event.localX,event.localY);
var dl:DrawLine=new DrawLine();
dl.freeDraw(startP,endP,panel.graphics);
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%" id="panel" click="drawLine(event)" mouseMove="moveMouse(event)"/>
</mx:Application>
下面是核心代码(AS):
package cyou.line
{
import flash.display.Graphics;
import flash.geom.Point;
public class DrawLine
{
public function DrawLine()
{
}
public function freeDraw(fP:Point,tP:Point,g:Graphics):void {
g.lineStyle(5,0x000000,1);
if(!fP){
fP=new Point(0,0);
}
if(!tP){
tP=new Point(0,0);
}
var solidLength:Number=10;
var brokenLength:Number=10;
var lineAngle:Number;
lineAngle = Math.atan2(tP.y - fP.y,tP.x - fP.x);
var xSolidLength:Number=solidLength*Math.cos(lineAngle);
var ySolidLength:Number=solidLength*Math.sin(lineAngle);
var xBrokenLength:Number=brokenLength*Math.cos(lineAngle);
var yBrokenLength:Number=brokenLength*Math.sin(lineAngle);
var forwardFlag:Boolean=true;
if(tP.x<fP.x){
forwardFlag=false;
}
var tempP:Point=new Point(fP.x,fP.y);
var tempToP:Point=new Point(tP.x,tP.y);
//当线是实线的时候
var lineType:String="solid";
while(checkIn(tempP.x,tP.x,forwardFlag)){
g.beginFill(0x555555);
if(lineType=="solid"){
tempToP.x=tempP.x+xSolidLength;
tempToP.y=tempP.y+ySolidLength;
g.moveTo(tempP.x, tempP.y);
g.lineTo(tempToP.x, tempToP.y);
lineType="space";
}else{
tempToP.x=tempP.x+xBrokenLength;
tempToP.y=tempP.y+yBrokenLength;
g.moveTo(tempToP.x, tempToP.y);
lineType="solid";
}
tempP.x=tempToP.x;
tempP.y=tempToP.y;
g.endFill();
}
}
private function checkIn(x:Number,toX:Number,forwardFlag:Boolean):Boolean{
var result:Boolean=true;
if(forwardFlag){//向前
if(x<toX){
}else{
result=false;
}
}else{
if(x>toX){
}else{
result=false;
}
}
return result;
}
}
}
其实画虚线就是一个先画一条短信,然后沿着终点向移动一段空白矩离,再接着画实线,一直这样重复,直到画到终点为止。
其效果如下:
- 大小: 3.6 KB
分享到:
相关推荐
在探讨“flex画虚线代码”这一主题时,我们深入解析如何利用Flex框架中的图形功能来绘制虚线,以及理解这段代码背后的核心逻辑和技术要点。Flex是一个强大的开发框架,主要用于构建跨平台的富互联网应用程序(RIA)...
我们可以创建一个自定义的AS3类,比如`MyDashLine.as`,并在其中覆盖`drawLine()`方法来绘制虚线。以下是一个基本的实现步骤: 1. 创建一个新的AS3类继承自Sprite或Shape,例如`MyDashLine`: ```as3 package { ...
在Flex Tree中,连接线通常用来表示节点间的父子关系,而"Flex Tree增加虚线连接"则涉及到如何为这些连接线添加虚线样式,以满足特定的视觉效果和设计需求。 在Flex Tree中实现虚线连接,我们需要理解以下几个关键...
总结起来,使用Point和Graphics类在ActionScript中绘制虚线涉及到以下几个关键步骤: 1. 创建Graphics实例。 2. 设置线条样式,包括虚线模式。 3. 定义线条路径。 4. 将Graphics对象应用到DisplayObject并显示。 这...
在Flex ActionScript编程中,创建虚线(dashed line)是一种常见的需求,特别是在图形和图表渲染中。"flex actionscript dashed line"这个标题暗示我们将讨论如何在ActionScript中实现虚线效果。`...
4. **边框和填充**:允许用户定义组件的边框样式,包括宽度、颜色、样式(实线、虚线等)以及填充颜色和渐变。 5. **效果和动画**:支持添加过渡效果和动画,如淡入淡出、滑动等,增强用户体验。 6. **类和状态...
Flex Tree组件是Adobe Flex框架中的一个关键元素,用于展示层次结构数据。在默认情况下,Tree组件的...这个过程涉及到Flex组件的渲染机制、图形绘制以及样式控制,对于提升Flex应用的用户体验和视觉效果具有重要意义。
3. **边框和填充**:可以设置边框宽度、样式(实线、虚线等)和颜色,以及组件内部的填充颜色。 4. **渐变和图案**:允许使用线性或径向渐变,以及自定义图案来增加视觉效果。 5. **效果和动画**:如淡入淡出、滑动...
综上所述,"flex时序图显示示例"涉及到Flex开发、ActionScript编程、时序图概念以及图形绘制技术。通过这样的示例,开发者可以更好地理解和应用时序图来阐述软件系统的动态行为。如果你需要更深入的了解或具体的实现...
在Flex中,使用Graphics类可以绘制不同样式的边,例如实线、虚线、带箭头的线条等。边的长度和弯曲程度可以根据节点位置动态调整,以保持拓扑的清晰度。 在实际应用中,`Topo_Demo`可能是包含示例代码或预览的项目...
Graffiti Library绘画类是专门为as3开发者设计的类库,可以轻易地将绘画功能集成到Flash、AIR和Flex项目中。 Graffiti Library的特点(Release3.0): 1、可以选定画布的尺寸 2、内置的缩放功能可以使用鼠标拖动画布...
3. **线型和宽度**:对于线状Feature,可以设置`lineWidth`来改变线条的宽度,`lineDashArray`用于定义虚线样式。 4. **标签样式**:如果需要为Feature添加标签,可以使用`label`属性,同时可以设置`labelAlign`、`...
`EDrawLineStyle`枚举类定义了绘制线时可选择的不同样式,如实线、虚线等。 ##### EDrawPointStyle枚举类 `EDrawPointStyle`枚举类定义了绘制点时的样式,如圆形、方形等。 ##### EDrawPolygon枚举类 `...
例如,绘制虚线的代码可能如下: ```actionscript graphics.lineStyle(lineThickness, lineColor, 0); // 0表示线条是透明的 graphics.moveTo(0, 0); // 移动到起始点 graphics.lineTo(w, 0); // 绘制到宽度的末端 ...
**CSS3垂直虚线时间轴特效详解** 在网页设计中,时间轴是一种常见的布局方式,用于展示事件或过程的顺序,常被用作大事记、项目进度或历史记录的展示。CSS3作为现代Web设计的核心技术之一,提供了丰富的样式和动画...
例如,我们可以使用Flexbox的`display: flex`和`flex-direction: column`属性创建垂直的时间轴,然后通过媒体查询(`@media`)来调整不同屏幕尺寸下的样式,确保在手机、平板和桌面电脑上都能良好显示。 时间轴的样式...
7. **边框和边距**: `border-radius`用于创建圆角,`border-style`定义边框样式(实线、虚线等),`border-width`设置边框宽度,`border-color`定义边框颜色。 8. **过渡和动画**: `transition`允许元素在不同状态...
2. 弹性盒模型(Flexbox):学习如何使用flex容器和flex项目进行响应式布局。 3. 网格布局(Grid):掌握CSS Grid系统,实现二维网格布局。 五、文字与字体 1. 文字阴影:添加文字阴影,提升文字的视觉效果。 2. @...
CSS3的边框不再局限于实线,可以设置为虚线、点线等。边框半径(border-radius)允许创建圆角效果,使得元素不再局限于方形,可以制作出各种形状的按钮或容器。 四、CSS3盒模型 CSS3盒模型引入了新的盒模型`box-...
水平步骤条可以通过`display: flex`实现,将每个步骤项设置为flex子元素,这样可以方便地控制它们在容器中的位置。 3. **样式定制**: - **文字居中**:利用`text-align: center`使第一步和最后一步的文字居中显示...