`
hereson
  • 浏览: 1464375 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

flex画的菱形

    博客分类:
  • flex
阅读更多

package com
{
        import mx.core.UIComponent;
        
        public class Draw extends UIComponent
        {
                private var WIDTH:int=60;
                private var HEIGHT:int=30;
                public function Draw()
                {
                        
                        drowOne();//绘制一个菱形
                        drow();//绘制多行多列菱形
                }
                public function init():void{
                        
                }
                /**
                 *         绘制20行40列 800个菱形
                 *  
                 * **/
                public function drow():void{
                        var h:int=HEIGHT/2;
                        var w:int=WIDTH/2;
                        for(var j:int=0;j<20;j++){
                                for(var i:int=0;i<40;i++){
                                        trace("helloWorld");
                                        this.graphics.moveTo(i*WIDTH,HEIGHT*j+h);
                                        this.graphics.lineStyle(1,0x52432);
                                        this.graphics.lineTo(WIDTH*i+w,HEIGHT*j);
                                        this.graphics.lineTo(WIDTH*(i+1),HEIGHT*j+h);
                                        this.graphics.lineTo(WIDTH*i+w,HEIGHT*(j+1));
                                        this.graphics.lineTo(i*WIDTH,HEIGHT*j+h);
                                        this.graphics.endFill();
                        
                                }
                        }
                }
        //绘制一行 10个菱形
//                public function drow():void{
//                        var height:int=HEIGHT/2;
//                        var width:int=WIDTH/2;
//                        for(var i:int=0;i<10;i++){
//                                this.graphics.moveTo(i*WIDTH,height);
//                                this.graphics.lineStyle(1,0x52432);
//                                this.graphics.lineTo(WIDTH*i+WIDTH/2,0);
//                                this.graphics.lineTo(WIDTH*(i+1),HEIGHT/2);
//                                this.graphics.lineTo(WIDTH*i+WIDTH/2,HEIGHT);
//                                this.graphics.lineTo(i*WIDTH,height);
//                                this.graphics.endFill();
//                        }
//                        
//                }
                /**
                 * 绘制一个 菱形,看成个长方体,取各边的中点连起来
                 * 我的方法是 左边中点--->上边中点--->右边中点----->下边中点---->左边中点
                 * 
                 * */
                public function drowOne():void{
                        var height:int=400;
                        var width:int=800;
                        this.graphics.beginFill(0x82145);
                        this.graphics.moveTo(200,300);//移动到某个点 (左边的中点)
                        this.graphics.lineStyle(1);
                        this.graphics.lineTo(200+width/2,300-height/2);//移动到上边中点
                        this.graphics.lineTo(200+width,300);//移动到右边中点
                        this.graphics.lineTo(200+width/2,300+height/2);//下边的重点
                        this.graphics.lineTo(200,300);//移动到起始点
                        this.graphics.endFill();
                }
                
                
        }
}

 

//画制网格
  //mapWidth:地图宽度
  //mapHeight:地图高度
  //tilePixelWidth:地图菱形宽度
  //tilePixelHeight:地图菱形高度
  public function drawGrid(mapWidth:int, mapHeight:int, tilePixelWidth:int, tilePixelHeight:int):void
  {
   this._mapWidth = mapWidth;
   this._mapHeight = mapHeight;
   this._tilePixelWidth = tilePixelWidth;
   this._tilePixelHeight = tilePixelHeight;
   var row:int = this._mapHeight/this._tilePixelHeight;
   var col:int = this._mapWidth/this._tilePixelWidth; 
   this._wHalfTile = int(this._tilePixelWidth/2);
   this._hHalfTile = int(this._tilePixelHeight/2); 
   trace("mapWidth : " + mapWidth);
   trace("mapHeight : " + mapHeight);
   trace("tilePixelWidth : " + tilePixelWidth);
   trace("tilePixelHeight : " + tilePixelHeight);
   trace("row : " + row);
   trace("col : " + col);
   var grid:Shape = new Shape();
   this.addChild(grid);
   
   grid.graphics.lineStyle(1, _gridLineColor, 1);
   
   var dblMapWidth:int = col*2 + 1;
   var dblMapHeight:int = row*2 + 1;
   for (var i:int=1; i<dblMapWidth; i=i+2)
   {
    
    grid.graphics.moveTo( i*this._wHalfTile, 0 );
    if (dblMapHeight+i >= dblMapWidth)
    {
     grid.graphics.lineTo( dblMapWidth*this._wHalfTile, (dblMapWidth-i)*this._hHalfTile );
    }
    else
    {
     grid.graphics.lineTo( (dblMapHeight+i)*this._wHalfTile, dblMapHeight*this._hHalfTile );
    }
   
    grid.graphics.moveTo( i*this._wHalfTile, 0 );
    if (i <= dblMapHeight)
    {
     grid.graphics.lineTo( 0, i*this._hHalfTile );
    }
    else
    {
     grid.graphics.lineTo( (i-row-1)*this._wHalfTile, dblMapHeight*this._hHalfTile );
    }
   }
   
   for (var j:int=1; j<dblMapHeight; j=j+2)
   {
  
    grid.graphics.moveTo( 0, j*this._hHalfTile );
    if (dblMapHeight-j >= dblMapWidth)
    {
     grid.graphics.lineTo( dblMapWidth*this._wHalfTile, (dblMapWidth+j)*this._hHalfTile );
    }
    else
    {
     grid.graphics.lineTo( (dblMapHeight-j)*this._wHalfTile, dblMapHeight*this._hHalfTile );
    }
   }
   
   for (var m:int=0; m<dblMapHeight; m=m+2)
   {
    grid.graphics.moveTo( dblMapWidth*this._wHalfTile, m*this._hHalfTile );
    if (dblMapWidth-dblMapHeight+m < 0)
    {
     grid.graphics.lineTo( 0, (dblMapWidth+m)*this._hHalfTile );
    }
    else
    {
     grid.graphics.lineTo( (dblMapWidth-dblMapHeight+m)*this._wHalfTile, dblMapHeight*this._hHalfTile );
    }
   }
  }
 
分享到:
评论
1 楼 sjbrising 2009-10-12  
用得着这么麻烦么?
flex不是有一个绘制椭圆的方法么,在椭圆里面的内接四边形不就是菱形么??

相关推荐

    最新的flex流程图源码

    1. **图形对象和布局**:流程图通常由各种形状(如矩形、菱形、箭头等)组成,源码中会定义这些图形对象,并实现它们之间的布局算法,如树状布局、网状布局等。 2. **事件处理**:流程图的节点和连接线可能需要响应...

    flex 3.0流程编辑器修改版源码

    在Flex 3.0中,我们可以利用其强大的图形组件库来实现自定义的流程图元素,包括矩形、菱形、圆形等,这些元素可以通过鼠标进行自由拖动,以调整其在画布上的位置。 其次,"拖动"功能是流程编辑器的重要组成部分。...

    jquery鼠标悬停导航条淡入淡出菱形导航菜单

    display: flex; justify-content: center; } #diamond-nav li { position: relative; } #diamond-nav a { position: relative; display: block; padding: 20px; text-decoration: none; color: #fff; ...

    菱形四边形样式网站模板

    同时,`display: flex`或`grid`布局可以帮助更好地对齐和组织菱形元素,使整个页面看起来更加整洁有序。 此外,考虑到网页的响应式设计,模板应能适应不同设备的屏幕尺寸,如手机、平板电脑和桌面电脑。这通常通过...

    漂亮的大背景图片CSS和jQuery导航栏特效代码

    通过`display: flex`或`display: grid`实现响应式布局,使导航项在不同屏幕尺寸下自动排列。`hover`伪类可以用于添加鼠标悬停时的样式变化,如颜色、边框或阴影效果。 5. **JavaScript事件**:jQuery中的`.on()`...

Global site tag (gtag.js) - Google Analytics