lottie无法设置大小，点击区域不正确

[KevinIvy]

lottie无法设置大小，点击区域不正确

const go = new GameObject('heart', {
     size: { width: 200, height: 200 }, // 不生效
})

绑定onTap事件后，只能在左上角触发点击事件

在lottieFiles上下载的lottie json文件，本地引入

Lottie.prototype.onTap = function (name, callback) {
        var _this = this;
        var g = new Graphics();
        this.on('success', function () {
            var ele = _this.anim.querySelector(name);
            var display = ele.display;
            g.beginFill(0xffffff);
            g.drawRect(0, 0, 100, 100);  // 感觉应该跟这里有关
            g.endFill();
            g.alpha = 0;
            display.addChild(g);
            ele.display.interactive = true;
            ele.display.on('pointertap', function () {
                callback();
            });
        });
    };

另外文档能否更详细一点，比如具体如何进行适配

• Eva.js version: e.g. 1.2.4
• Browser & Version: e.g. Chrome 96
• OS & Version: e.g. MacOS 10.15.7
• Running Example: url

[fanmingfei]

可以用 GameObject 第二个参数的 scale 来控制大小。 点击的问题可以给我有问题的代码，我来看一下

关于适配： 固定高度的可以用以下代码 全屏的高度的 width 设置750，height 设置 window.innerHeight / window.innerWidth * 750 游戏里面的尺寸用750设计稿里的元素尺寸就可以了 目前这个是比较推荐的方案。

<style>
  #canvas {
    width: 100%;
    height: auto;
  }
</style>
<canvas id="canvas"></canvas>

import { Game } from '@eva/eva.js'
import { RendererSystem } from '@eva/plugin-renderer'

// 创建渲染系统
const rendererSystem = new RendererSystem({
  canvas: document.querySelector('#canvas'), // 可选，自动生成canvas 挂在game.canvas上
  width: 750, // 必填
  height: 1000, // 必填
  transparent: false, // 可选
  resolution: window.devicePixelRatio / 2, // 可选, 如果是2倍图设计 可以除以 2
  enableScroll: true, // 允许页面滚动
  renderType: 0 // 0:自动判断，1: WebGL，2:Canvas，建议android6.1 ios9 以下使用Canvas，需业务判断。
})

// 初始化游戏
const game = new Game({
  frameRate: 60, // 可选
  autoStart: true, // 可选
  systems: [rendererSystem]
})

[KevinIvy]

谢谢。scale可以解决问题，是否只有lottie不支持设置size呢？我试过image是没问题的。

lottie绑定点击的代码如下：

...

resource.addResource([
{
  name: 'Astronaut',
  type: 'LOTTIE',
  src: {
    json: {
      type: 'data',
      data: AstronautJson,
    },
  },
  preload: true,
},
])

...

const Astronaut = new Lottie({ resource: 'Astronaut' })
Astronaut.play([0, 0], { repeats: 0 })
Astronaut.onTap('StarInHand_Baby_Astronaute', () => {
  console.log(
    'lottie click !',
    window.event.changedTouches[0].pageX,
    window.event.changedTouches[0].pageY,
  )
  Astronaut.play([1, 61], { repeats: 0 })
})
const AstronautGO = new GameObject('AstronautGO', {
  scale: { x: 0.5, y: 0.5 },
})

AstronautGO.addComponent(Astronaut)

lottle的json数据是下载到本地以data方式加载

lottie.json.zip

点击区域的问题我用教程中的lottile试了一下是可以的，但是我自定义的lottie就有问题，很奇怪

[fanmingfei]

龙骨动画和Spine动画都没有办法设置宽高。因为无法确定它的动画边界到底在哪里

[KevinIvy]

响应太快了，了解到了，多谢大佬

[fanmingfei]

点击问题等明天上班让同事看看 你可以尝试一下导入这个网站检查一下：https://design.alipay.com/lolita

[KevinIvy]

好的，我去试试

[jasonChen1982]

https://github.com/eva-engine/eva.js/blob/eba3261c47e9b51b8e06ea135b646da0031dc848/packages/plugin-renderer-lottie/lib/Lottie.ts#L88-L103

应该是这里写死了

[bohexigua]

问题原因：eva-lottie 最外层的容器并非是由所有子元素撑出来的 Rect，Container Size 取决于 lottie 产物。这和 CSS 中的布局很像，如 “绝对定位”，“浮动定位”，是不会占据空间的。

解决思路：AE 工程文件中新增一个空对象，空对象面积需要覆盖整个动画场景，在 Astronaut 中通过 Astronaut.onTap(nm, () => {}); 对这个空对象绑定点击事件。

[KevinIvy]

问题原因：eva-lottie 最外层的容器并非是由所有子元素撑出来的 Rect，Container Size 取决于 lottie 产物。这和 CSS 中的布局很像，如 “绝对定位”，“浮动定位”，是不会占据空间的。

解决思路：AE 工程文件中新增一个空对象，空对象面积需要覆盖整个动画场景，在 Astronaut 中通过 Astronaut.onTap(nm, () => {}); 对这个空对象绑定点击事件。

我试试，谢谢

[fanmingfei]

如果是给整个lottie元素加事件，可以使用 @eva/plugin-renderer-event 如果是想给lottie里面的元素加事件，可以通过空对象的方式

这里存在一个bug有待修复，给空对象的子元素设置100*100宽高时，可以自动扩展到空对象宽高响应点击，但是正常对象有问题。 后续这个地方改为hitArea的形式，可以解决这个问题。

[fanmingfei]

通过空对象的方式 可以解决目前遇到的问题。

[KevinIvy]

发现对lottie动画的transform做rotation旋转的时候，即使对设置了origin: {x: 0.5, y: 0.5}，依然无法围绕中心点旋转，图片是没问题的，这个是否也是无法断定lottie边界的原因？

[fanmingfei]

是的，这个origin点是在设计的时候确定的。

[KevinIvy]

好的，了解了