Egret实现显示对象放大缩小（Scale改变）锚点坐标（anchorOffset）对应改变

实际项目中，我们经常会用两个手指对一个看到的显示对象进行放大和缩小的操作，平面2D所涉及到的便是改变这个显示对象的scaleX和scaleY属性。

一个显示对象再不做任何拉伸的情况下，显示对象默认的Scale为1，锚点偏移坐标的X和Y都为0。

虽然显示对象并没有发生位移，坐标未做任何更改，但是由于锚点偏移坐标发生了变化，此时的锚点偏移坐标X和Y都为100，导致视觉上也同时发生了变化，此时我们需要做的便是相应调整显示对象的坐标，让其回到我们所认为合适的视觉效果。

回到主题，两个手指对一个看到的显示对象进行放大和缩小的操作，其实正是锚点偏移坐标发生变化同时scale也发生了变化，这种情况更复杂一点儿，需要我们将缩放比例同时融入到算法当中去，完整示例代码如下。

class DragPanel extends eui.UILayer {public constructor() {super();this.once(egret.Event.ADDED_TO_STAGE, this.AddToStage,this)}private sc:number = 1;private AddToStage(evt:egret.Event):void{  this.scaleX = this.scaleY = this.sc;let result = new egret.Bitmap();let texture: egret.Texture = RES.getRes("bg_jpg");result.texture = texture;let sky = result;this.addChild(sky);console.log("Scale******" + this.sc);console.log("anchorOffsetX******" + this.anchorOffsetX + "," + "anchorOffsetY******" + this.anchorOffsetY);this.stage.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.mouseDown, this);this.stage.addEventListener(egret.TouchEvent.TOUCH_END, this.mouseUp, this);this.stage.addEventListener(egret.TouchEvent.TOUCH_MOVE, this.mouseMove, this);}private shape:egret.Shape;private mouseDown(evt:egret.TouchEvent){if(this.shape && this.shape.parent){this.shape.graphics.clear();this.shape.parent.removeChild(this.shape);this.shape = null;}let offsetX = this.anchorOffsetX*this.sc - this.x;let offsetY = this.anchorOffsetY*this.sc - this.y;this.anchorOffsetX = (evt.stageX + offsetX)/ this.sc;this.anchorOffsetY = (evt.stageY + offsetY)/ this.sc;this.shape  = new egret.Shape();this.shape.graphics.beginFill(0xff0000);this.shape.graphics.drawRect(this.anchorOffsetX, this.anchorOffsetY, 10, 10);this.shape.graphics.endFill();this.addChild(this.shape); this.x = this.anchorOffsetX*this.sc - offsetX;this.y = this.anchorOffsetY*this.sc - offsetY;}private mouseMove(evt:egret.TouchEvent){}private mouseUp(evt:egret.TouchEvent){}}

其中的私有变量sc，可以任意设置0-1的任何值，以达到改变Scale模拟拉伸的效果。

Egret实现显示对象放大缩小（Scale改变）锚点坐标（anchorOffset）对应改变相关推荐

Qt 显示图片放大缩小移动
本文章原创于www.yafeilinux.com 转载请注明出处. 现在我们来实现在窗口上显示图片,并学习怎样将图片进行平移,缩放,旋转和扭曲.这里我们是利用QPixmap类来实现图片显示的. 一.利 ...
超大超长图片居中显示且放大缩小无影响
1. 超大图片居中显示 1.1 放大缩小都居中显示 <!DOCTYPE html> <html lang="en"> <head> <me ...
全屏背景半透明对话框用PhotoView显示图片放大缩小图片
需求:在当前页面悬浮显示图片,背景位透明色. 废话不多说,直接上代码. 先引入两个库,很常见的啦~~ compile 'com.github.chrisbanes.photoview:library: ...
Vue+Openlayers显示TileWMS时不显示默认控件放大缩小旋转等组件
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_霸道流氓气质的博客-CSDN博客在上面 ...
as3学习第二课显示对象和显示列表
关于显示对象原文地址:as3学习第二课显示对象和显示列表作者:冰剑蓝影一.显示对象显示对象就是可以在舞台上显示的对象.包括直接看到的对象,如图形.文字.图片.视频.还有看不到但又真 ...
android image对象改变,【Android学习】动态放大缩小ImageView里的图片，运用Matrix对象来....
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 /* 设置图片缩小的比例 */ double scale=0.8; /* 计算出这次要缩小的比例 */ scaleWidth=(float) (scale ...
Unity中常用的单例模式、对象池的脚本模板，连按退出和滑动翻页或放大缩小的功能实现，以及属性在代码中的灵活使用
1.单例模式的脚本模板: Unity中针对一些常用的manager可以使用单例模式,用于统一的功能管理: //普通单例,不需要继承MonoBehavior,不用挂载在GameObject上 publi ...
QT 实现滚屏显示多张漂亮美眉图片（可放大缩小）
作为新手小白的一些分享....... 其中一部分功能要求显示多张图片,如果图片总高度超过工具窗口的高度就要有滚动条出现,实现滚屏的效果,网上这部分内容少之又少,我就把效果和代码都贴出来供大家参考. 想 ...
如何使QGraphicsItem不随QGraphicsView放大缩小而改变大小
一.简述在使用QGraphicsView过程中,有时候我们需要对view进行缩放,但是对于一般正常的加入view中的item都会随着view的大小变化而变化,但是如果我们想让某些item不随view ...

Egret实现显示对象放大缩小（Scale改变）锚点坐标（anchorOffset）对应改变

Egret实现显示对象放大缩小（Scale改变）锚点坐标（anchorOffset）对应改变相关推荐

最新文章

热门文章