lottie渲染的动画如何铺满

[vickyleu]

渲染效果

实际效果

被压的扁扁的

<View className='right-content'>
                    {/* 右边的内容 */}
                    <Canvas id='canvas' className={`right-image ${isDisabled ? 'disabled' : ''}`}
                            type='2d' onTouchStart={handleClick} onTouchEnd={handleReleaseClick} onClick={() => {
                    }}
                    />
                </View>
                
                



.right-image {
  position: absolute;
  top: 0;
  left: 0;
  background-color: blueviolet;
  max-width: 95%;
  //width: 100%;
  height: 95%; // 这确保了图像将填满其父容器
  object-fit: cover; // 确保图片按照纵横比来填充
  border-radius: 50%; // 使其成为圆形
  border: 2px solid black; // 黑色边框
  box-shadow: 0px 14px 18px rgba(0, 0, 0, 0.1); // 阴影效果
  transition: box-shadow 0.3s ease; // 过渡效果
}

.right-image.disabled {
  background-color: red;
  filter: grayscale(100%);
  box-shadow: 0px 14px 18px rgba(0, 0, 0, 0.1); // Adjusted shadow for "pressed" effect
}
   

[vickyleu]

使用rendererSettings: {context: context, preserveAspectRatio: 'xMidYMid slice'},
也只能高度铺满,始终是一个扁的

[vickyleu]

.canvas {
position: absolute; //通过向左增大实际宽度的50%,使左右两边腾出100%的边距,再放大到200%,也就是把lottie的宽度增大一倍
left: -50%;
width: 200%; /* 设置 lottie 容器的宽度 /
height: 100%;
//padding-bottom: 30%; / 设置 lottie 容器的高度，根据宽度得到的一个比例,虽然我是看不懂这是什么鬼操作 */
box-sizing: content-box;
object-fit: fill; // 确保图片按照纵横比来填充
}