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(clip
isplayObject, _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;
}
重写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(clip

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
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28