package customer
{
import flash.geom.Point;
import mx.core.UIComponent;
public class MyTriangle extends UIComponent
{
public function MyTriangle()
{
super();
}
//箭头的大小
public var Radius:int=6;
public var FromPoint:Point;
public var ToPoint:Point;
//线性的颜色
public var LineColor:uint=0x000000;
//是否需要画箭头
public var NeedArrow:Boolean=true;
private function GetAngle():int
{
var tmpx:int=ToPoint.x-FromPoint.x ;
var tmpy:int=FromPoint.y -ToPoint.y ;
var angle:int= Math.atan2(tmpy,tmpx)*(180/Math.PI);//这是什么意思呢???
return angle;
}
//绘制线
public function Draw():void
{
this.graphics.clear();
this.graphics.lineStyle(1,LineColor,1);
this.graphics.moveTo(FromPoint.x,FromPoint.y);
this.graphics.lineTo(ToPoint.x,ToPoint.y);
if(NeedArrow)
{
var angle:int =GetAngle();
var centerX:int=ToPoint.x-Radius * Math.cos(angle *(Math.PI/180)) ;
var centerY:int=ToPoint.y+Radius * Math.sin(angle *(Math.PI/180)) ;
var topX:int=ToPoint.x ;
var topY:int=ToPoint.y ;
var leftX:int=centerX + Radius * Math.cos((angle +120) *(Math.PI/180)) ;
var leftY:int=centerY - Radius * Math.sin((angle +120) *(Math.PI/180)) ;
var rightX:int=centerX + Radius * Math.cos((angle +240) *(Math.PI/180)) ;
var rightY:int=centerY - Radius * Math.sin((angle +240) *(Math.PI/180)) ;
this.graphics.beginFill(LineColor,1);
this.graphics.lineStyle(1,LineColor,1);
this.graphics.moveTo(topX,topY);
this.graphics.lineTo(leftX,leftY);
this.graphics.lineTo(centerX,centerY);
this.graphics.lineTo(rightX,rightY);
this.graphics.lineTo(topX,topY);
this.graphics.endFill();
}
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init();" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FCFCFC, #FCFCFC]">
<mx:Script>
<![CDATA[
/*1.画一条线,这个很简单。
2.画箭头,这步比较麻烦,因为画箭头的时候,线需要旋转,箭头也需要跟着旋转,这样就需要动态的计算坐标。
* */
import mx.controls.Alert;
import customer.MyTriangle;
var begin:Boolean=false;
var tmp:MyTriangle;
var fromPoint:Point;
private function mouseDownHandler(e:MouseEvent) : void
{
begin=true;
fromPoint=new Point(mouseX,mouseY);
tmp=new MyTriangle();
tmp.Radius=4;
tmp.NeedArrow=true;
myCanvas.addChild(tmp);
}
private function mouseMoveHandler(e:MouseEvent):void
{
if(begin)
{
var toPoint:Point=new Point(mouseX,mouseY);
tmp.FromPoint=fromPoint;
tmp.ToPoint=toPoint;
tmp.Draw();
}
}
private function mouseOverHandler(e:MouseEvent):void
{
begin=false;
}
]]>
</mx:Script>
<mx:Canvas x="0" y="0" width="100%" id="myCanvas" height="100%"
mouseUp="mouseOverHandler(event)" mouseDown="mouseDownHandler(event)" mouseMove="mouseMoveHandler(event);">
</mx:Canvas>
</mx:Application>
分享到:
相关推荐
flex画两个图片控件,用箭头把这两个连接起来,定制工作流程需要的flex技术例子。
分别用ArcGIS Flex API和SuperMap Flex API实现的军标箭头库,有需要源码的可回复邮箱索取。
基于arcgis flex api 实现动态标绘功能,为2.0新版本
Flex实现画线(可拖拽、带箭头、可变色)例子
拷贝别人做的一个画线的demo,没有使用任何第三方的东西,任意指定两点,可以画直线,折线,可以设置箭头,锚点,线的粗细,线的颜色,功能强大; 开发时间有点仓促,难免有BUG,欢迎大家批评指正。
React弓箭手 :bow_and_arrow: 在React中的DOM元素之间绘制箭头 :fountain_pen:安装npm install react-archer --save或yarn add react-archer例子 import { ArcherContainer , ArcherElement } from 'react-archer' ...
不包括工程,是我项目中的一个在线编辑器的源码,完全是我个人做的东西,可以扩展成工作流的在线编辑器,我目前只在里边提供了基本的功能,主要包括拖拽算法,删除,画带箭头的关系线,里边是一个mxml文件,一个后台...
div箭头和气泡210306 JavaScript语句210306 CSS变量&CSS常见动画合集210307 阴影,渐变,滤镜210308 文字特效210309 解决父元素高度坍塌塌陷问题210310 表单美化210311 实用css小集锦210312 Emmet210313 布局练习...
- `flex`布局 - 如何实现居中对齐? - 理解语义化 - CSS3 动画 - 重绘和回流,变量类型 - JS 的数据类型分类和判断 - 值类型和引用类型 - 原型与原型链(继承) - 原型和原型链定义 - 继承写法 - 作用域和闭包 ...
10. **布局与定位**:通过 `display` 属性(如 `block`, `inline-block`, `flex`, `grid` 等)和 `position` 属性(如 `static`, `relative`, `absolute`, `fixed`),可以控制菜单项的排列方式和相对位置,实现下拉...
学习JS蓬松的鸟参照的Flappy Bird,...旋转,变换原点秒针角度骤变问题第三天:CSS变量知识盲区变量CSS变量 CSS变量第4天:阵列有氧运动第1天 Array.prototype下的一级用法第五天:Flex Panel Gallery flex布局 CSS的
`.arrow::after`是伪元素,用于画出45度角的箭头,利用`content: ""`创建一个空的内容,然后通过`border`属性设置线条,最后用`transform: rotate(45deg)`旋转元素以形成箭头形状。 `.center`类用于居中显示元素,...
开发环境通常是Adobe Flash或Flex,它们提供了图形界面供开发者设计和编辑动画。运行环境一般是指支持Flash Player的浏览器或设备,确保游戏可以在不同平台上流畅运行。而编程语言是ActionScript,它有三种版本:AS1...
style=inline&anim=tile&n=100&txt&img&s=10&back -动画图块,图块数= 100,布局:内嵌块,在此重复10步使用箭头键滚动。 单击灰色的'info'元素(带有JSON conf)以开始测试动画。 试运行假定从位置0开始。conf ...
4. **常用布局结构**:包括浮动布局(使用`float`属性)、定位布局(`position`属性)、Flex布局(`display: flex`)和Grid布局(`display: grid`)。 5. **编写习惯**:保持代码整洁,合理使用注释,遵循语法规则...
这里,我们将标题设置为一个Flex布局,并对内容部分应用`overflow: hidden`和`text-overflow: ellipsis`来实现内容的收起效果。具体样式如下: ```less .container { .title { display: flex; flex-direction: ...
directionNav: false, // 是否显示左右导航箭头 pauseOnHover: true // 鼠标悬停时暂停轮播 }); }); ``` 这只是一个基本的flexslider.js轮播实现,实际使用时可以根据项目需求进行更复杂的定制,如添加动画效果...
ES6的新特性包括const、let、解构赋值、promise、箭头函数、扩展运算符、对象简写等。 CSS部分: 1. 盒模型宽度/高度计算: 盒模型宽度(高度同宽度)= 内容宽度+内边距+边框。可以使用box-sizing:border-box;来让...
5. **居中布局**:水平居中可以通过设置`margin: 0 auto`实现,垂直居中可以用`display: flex`配合`align-items: center`或`vertical-align: middle`、`line-height`、`table-cell`等方法。 6. **CSS选择器**:包括...
ES6引入了let、const、箭头函数、Promise等新特性;原型链是JavaScript继承的核心,通过__proto__属性连接;call、apply、bind都用于改变函数调用的上下文,但方式不同;AOP常用于添加日志、事务管理等横切关注点;...