昨天(而不是今天,因为花了两天才解决。。)遇到了一个很简单又很困难的问题:在egret中创建了一个shape,然后画了一个带背景颜色的圆,现在需要实现这个圆的放大效果。
这看上去是一个很简单的问题,只需要设置个放大的属性就行了,但是在egret里做这个效果的时候,简直是折磨我了。
出现的问题:
在定时器中设置shape的scaleX和scaleY的时候,整个圆离原有的中心点渐行渐远。。。如下
这种方式中心点严重偏移(此图仅是示意图)。
解决思路和方案:
之所以会出现这种偏移效果是因为,在圆被放大的同时,圆的锚点并没有随着圆的放大而改变,因此每放大一次整个圆都会偏移一点。那么是否能通过改变实时的改变圆的锚点从而使得圆的中心位置不动呢?经过我无数次的尝试,答案是不能的。如能,望求告知 = =
结论:设置scaleX的方法不可行。既然设置scaleX不行,那么换另外一种设置放大方式,把锚点设在圆(或者矩形)的中间,然后不断的放大width和height,这种方式行吗?结果也是否定的。一是由于设置的width和height是固定的,所以锚点是不会随着width的变化而变化。另外,设置shape的宽度对圆的宽度没有任何影响。
结论:不能通过width来放大现在就只剩下一种方式可行了,通过bitmap放大。设置锚点为img.width / 2, img.height / 2,就能够得到正常的放大图片。这是放大的同时,img的宽度和高度也随着放大了,随意锚点的位置一直处于正中心。但是这种放大方式对于我来说也行不通,因为我想要的圆是任意颜色的,即随机生成颜色的圆进行放大,如果是图片的话,只能是勉勉强强能接受。。。
最终的解决方案:
既然bitmap能够很好的缩放,那么是否能够将shape或者是sprite等转化成bitmap呢?经上网搜索,无果。
但是我想起了之前做排行榜的时候看过的一句话,可以把sharecanvas看做一张图,通过bitmap添加到egret主项目中。所以现在需要做的是将shape写成canvas形式。代码如下:
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 2 * r
canvas.height = 2 * r
ctx.beginPath()
ctx.arc(r, r, r, 0, Math.PI * 2)
ctx.closePath()
ctx.fillStyle = '#ff0000'
ctx.fill()
const bitmapdata = new egret.BitmapData(canvas)
bitmapdata.$deleteSource = false
const texture = new egret.Texture()
texture._setBitmapData(bitmapdata)
const bitmap = new egret.Bitmap(texture)
bitmap.width = 2 * r
bitmap.height = 2 * r
bitmap.anchorOffsetX = bitmap.width / 2
bitmap.anchorOffsetY = bitmap.height / 2
this.addChild(bitmap)
r是圆的半径,这样就得到了一个可以是任意颜色的圆的‘图片’,然后使用scaleX就可以正常的缩放而不会出现圆中心偏移的情况了 =,. =