屏幕坐标
<h1>屏幕坐标</h1>
<p><code>H5Position</code> ：5坐标对象
<code>H5PositionManagerConfig</code> : H5坐标对象管理容器配置
<code>H5PositionManager</code> : H5坐标对象管理容器</p>
<h2>类说明</h2>
<h3>H5Position</h3>
<ul>
<li><strong>构造</strong>: <code>new BCore.Extension.H5Position(id, position)</code></li>
<li><strong>参数</strong>:
<ul>
<li><strong>id</strong>: <code>string</code> - H5坐标对象的唯一标识符</li>
<li><strong>position</strong>: <code>{x, y, z}</code> - 世界坐标，如 <code>{ x: 0, y: 0, z: 0 }</code></li>
</ul></li>
</ul>
<h4>属性</h4>
<ul>
<li><strong>id</strong>: <code>string</code></li>
<li><strong>worldPosition</strong>: <code>Vector3</code> - 世界坐标</li>
<li><strong>screenPosition</strong>Vector2` - 屏幕坐标</li>
<li><strong>onChange?</strong>: <code>Function</code> - 在 viewer3D 渲染时触发的回调，返回 <code>this</code></li>
</ul>
<h3>H5PositionManagerConfig</h3>
<ul>
<li><strong>构造</strong>: <code>new BCore.Extension.H5PositionManagerConfig(viewer3D)</code></li>
<li><strong>成员变量</strong>:
<ul>
<li><strong>viewer3D</strong>: <code>BCore.Viewer.Viewer3D</code> - 3D查看器实例</li>
</ul></li>
</ul>
<h3>H5PositionManager</h3>
<ul>
<li><strong>构造</strong>: <code>BCore.Extension.H5PositionManager(config)</code></li>
<li><strong>成员变量</strong>:
<ul>
<li><strong>config</strong>: <code>BCore.Extension.H5PositionManagerConfig</code></li>
</ul></li>
</ul>
<h3>方法</h3>
<ul>
<li><strong>addPosition(position: H5Position)</strong> - 添加一个 H5 屏幕坐标</li>
<li><strong>getPosition(id: string)</strong> - <code>H5Position | undefined</code> - 根据 ID 获取 H5Position（v2.8）</li>
<li><strong>deletePosition(id: string)</strong> - 移除指定 ID 的 H5Position</li>
<li><strong>clearAllPosition()</strong> - 清空所有 H5 屏幕坐标（v2.8）</li>
<li><strong>getAllPosition(): H5Position[]</strong> - 获取所有 H5Position（v2.8）</li>
</ul>
<h2>示例</h2>
<h3>1.添加 H5 屏幕坐标</h3>
<pre><code class="language-javascript">let mydiv = document.createElement(&quot;div&quot;);
let root = document.getElementById('bcorecontainer');
mydiv.style.width = &quot;50px&quot;;
mydiv.style.height = &quot;50px&quot;;
mydiv.style.position = &quot;absolute&quot;;
mydiv.style.top = '0px';
mydiv.style.left = '0px';
mydiv.style.marginLeft = '-25px';
mydiv.style.marginTop = '-25px';
mydiv.style.backgroundColor = &quot;#FF0000&quot;;
mydiv.innerHTML = &quot;Hello BCore&quot;;
root.appendChild(mydiv);
let h5Position = new BCore.Extension.H5Position('LKJxhiohADd', {x: 0, y: 0, z: 0});
h5Position.onChange = (val) =&gt; {
mydiv.style.left = val.screenPosition.x + 'px';
mydiv.style.top = val.screenPosition.y + 'px';
};
let h5PositionManagerConfig = new BCore.Extension.H5PositionManagerConfig(mViewer3D);
let h5PositionManager = new BCore.Extension.H5PositionManager(h5PositionManagerConfig);
h5PositionManager.addPosition(h5Position);</code></pre>
<h3>2.移除 H5 屏幕坐标</h3>
<pre><code class="language-javascript">var h5Position = new BCore.Extension.H5Position('1', {x: 0, y: , z: 0});
h5Position.onChange = (val) =&gt; { console.log(val); };
var h5PositionManagerConfig = new BCore.Extension.H5PositionManagerConfig(viewer3D);
var h5PositionManager = new BCore.Extension.H5PositionManager(h5PositionManagerConfig);
h5PositionManager.addPosition(h5Position);
h5PositionManager.deletePosition(h5Position.id);</code></pre>
<h3>3.清空所有 H5 屏幕坐标</h3>
<pre><code class="language-javascript">var h5Position = new BCore.Extension.H5Position('name', {x: 0, y: 0, z: 0});
h5Position.onChange = (val) =&gt; { console.log(val); };
var h5PositionManagerConfig = new BCore.Extension.H5PositionManagerConfig(viewer3D);
var h5PositionManager = new BCore.Extension.H5PositionManager(h5PositionManagerConfig);
h5PositionManager.addPosition(h5Position);
h5PositionManager.clearAllPosition();</code></pre>