+ -
当前位置:首页 → 问答吧 → OpenScales的层中实现图片自身中心旋转

OpenScales的层中实现图片自身中心旋转

时间:2011-05-09

来源:互联网

使用OpenScales(OS)中,采用了CustomMarker的createUrlBasedMarker方法,创建一个CustomMarker对象,然后图片以标注的方式显示在了OS层上,目前我通过测试,发现其实OS是按照Bitmap的方式进行对象存放的,因为我获取并成功打印出了Bitmap对象,在此基础之上,使用了rotation属性,Bitmap可以在z方向旋转了,但旋转时圆心不是Bitmap的圆心,我也想使用Flex的Rotate使Bitmap旋转,这样非常方便能达到要求,但实际测试后,发现Rotate对Image有效,但对Bitmap无效,至少我测试是这样,按照CustomMarker的createDisplayObjectMarker的方式创建CustomMarker的话,Image在OS的层上又显示不出来,暂时能想到的方法我都试过了,无果,想听听大家的高见,非诚勿扰,提前感谢了。

作者: frozenthrone   发布时间: 2011-05-09

我的做法:
重写draw方法:
override public function draw():void {
                     if(!this.clip){
                            return;
                     }
                     
                     this._maxZoom = this.layer.map.baseLayer.maxZoomLevel;
                     var resolution:Number = this.layer.map.resolution;
                     var zoom:Number = this.data.canResize?this.layer.map.zoom:this._maxZoom;
                     
                     var scale:Number = zoom / this._maxZoom;
                     
                     this._cWidth = this._width * scale;
                     this._cHeight = this._height * scale;
                     this.clip.scaleX = this._scales[0] * scale;
                     this.clip.scaleY = this._scales[1] * scale;
                     //this.clip.width = this._width * (zoom / this._maxZoom);
                     //this.clip.height = this._height * (zoom / this._maxZoom);
                     
                     var dX:int = -int(this.layer.map.layerContainer.x) + this.left;
                     var dY:int = -int(this.layer.map.layerContainer.y) + this.top;
                     
                     _x = dX - (this._cWidth/2) + _xOffset + point.x / resolution;
                     _y = dY - (this._cHeight/2) + _yOffset - point.y / resolution;
                     if(this.data.showLabel){
                            this.createLabel(scale);
                     }
                     this.clip.x = _x;
                     this.clip.y = _y;
                     var vec:Vector.<Number> = FlashPoint.calculate(this.clip, this._cWidth, this._cHeight, _x, _y, Number(this.data.angle));
                     this.clip.x = vec[0];
                     this.clip.y = vec[1];
                     this.clip.rotation = Number(this.data.angle);
              }
其中FlashPoint.calculate方法如下:
public static function calculate(clipisplayObject, _width:Number, _height:Number, _x:Number, _y:Number, angle:Number):Vector.<Number>{
                     var tmp1:Number  = Math.sin(angle*DEGREE_TO_RADIAN/2) * Math.sqrt(_width * _width + _height * _height);
                     var tmp2:Number = ((90 - angle/2)*DEGREE_TO_RADIAN) + (Math.atan(_width/_height));
                     var x:Number = _x + (Math.sin(tmp2)) * tmp1;
                     var y:Number = _y + (Math.cos(tmp2)) * tmp1;
                     var vec:Vector.<Number> = new Vector.<Number>();
                     vec.push(x);
                     vec.push(y);
                     return vec;
              }

作者: WebGisDirector   发布时间: 2011-05-30