Question

我正在尝试使用接收到的值动态创建图像。但是以某种方式在设置imgObj（下面的代码）的position属性时出现以下错误

xpos, ypos和zpos包含字符串浮动值，例如xpos = "-0.2", ypos="-0.1", zpos="0.2"

var imgObj = document.createElement("a-image");
imgObj.setAttribute("src",'url(' + $event.src + ')');
//imgObj.setAttribute("position",{x:0,y:0,z:0})
imgObj.setAttribute('position',{x:xpos, y:ypos, z:zpos});

任何想法或建议都会有所帮助...谢谢

Answer 1

如果您不使用框架，那将是TypeScript的正确行为，因为在仅DOM / HTML的世界中，将对象作为setAttribute的值会得到意外的结果。

要告知TypeScript aframe所增加的额外功能，您可以安装aframe类型：

npm install -D @types/aframe

当属性为

时，这将添加表示setAttribute可以带x，y，z数字的对象的类型。

引用https://unpkg.com/@types/aframe@0.8.0/index.d.ts：

export interface Coordinate {
    x: number;
    y: number;
    z: number;
}

然后在文件中降低

setAttribute(type: 'position' | 'rotation' | 'scale', value: Coordinate): void;

因此，看起来应该这样做。

最后的想法

值得注意的是，不建议将setAttribute用于此目的，如其文档中所示： https://aframe.io/docs/0.8.0/components/position.html

出于性能和人体工程学的考虑，我们建议直接通过three.js Object3D .position Vector3与.setAttribute来更新位置。

此方法更容易，因为我们可以访问所有Vector3实用程序，并且通过跳过.setAttribute开销并且不需要创建对象来设置旋转度，就可以更快：

Answer 2

我猜解决方案是不使用Typescript。它不希望DOM方法被覆盖。

错误TS2345：类型为'{x：number; y：数字； z：数字； }'不可分配给'string'类型的参数

2 个答案: