UNPKG

@realsee/five

Version:

Realsee Renderer SDK

89 lines (83 loc) • 32.4 kB
<!DOCTYPE html><html class="default" lang="en" data-base="../"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>features/get-screen-pixels | 如视 Five SDK</title><meta name="description" content="Documentation for 如视 Five SDK"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="../index.html" class="title">如视 Five SDK</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">features/get-screen-pixels</a></li></ul></div><div class="tsd-panel tsd-typography"><h1 id="获取屏幕像素-get-screen-pixels" class="tsd-anchor-link">获取屏幕像素 (Get Screen Pixels)<a href="#获取屏幕像素-get-screen-pixels" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1> <ul> <li><strong>Summary</strong>: <code>five.getPixels</code> 方法用于获取 Five 画布指定区域的像素数据(RGBA),常用于实现放大镜、取色器或截图功能。</li> <li><strong>Schema</strong>: <code>GetPixelsOptions</code>。</li> <li><strong>Concepts</strong>: <code>WebGLRenderTarget</code>, <code>gl.readPixels</code>, <code>Magnifier</code>。</li> <li><strong>Examples</strong>: 放大镜实现、获取中心点颜色。</li> </ul> <h2 id="schema" class="tsd-anchor-link">Schema<a href="#schema" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <blockquote> <p><strong>Definition</strong>: <a href="../../five/application/five.d.ts">GetPixelsOptions</a></p> </blockquote> <p><code>five.getPixels</code> 支持两种调用方式:参数列表(旧版)和对象参数(推荐)。</p> <h3 id="推荐调用方式" class="tsd-anchor-link">推荐调用方式<a href="#推荐调用方式" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <pre><code class="typescript"><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getPixels</span><span class="hl-1">(</span><span class="hl-6">options</span><span class="hl-1">: </span><span class="hl-6">GetPixelsOptions</span><span class="hl-1">): </span><span class="hl-6">Uint8Array</span><span class="hl-1"> | </span><span class="hl-6">Uint8ClampedArray</span><span class="hl-1">;</span><br/><br/><span class="hl-3">interface</span><span class="hl-1"> </span><span class="hl-7">GetPixelsOptions</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">/** 获取像素区域的起始坐标 x (基于 Canvas 左下角,除非 flipY 为 true) */</span><br/><span class="hl-1"> </span><span class="hl-6">x</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 获取像素区域的起始坐标 y */</span><br/><span class="hl-1"> </span><span class="hl-6">y</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 获取像素区域的宽度 */</span><br/><span class="hl-1"> </span><span class="hl-6">width</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 获取像素区域的高度 */</span><br/><span class="hl-1"> </span><span class="hl-6">height</span><span class="hl-1">: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 获取区域的像素比 (默认 1) */</span><br/><span class="hl-1"> </span><span class="hl-6">pixelRatio</span><span class="hl-1">?: </span><span class="hl-7">number</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 是否显示辅助元素 (默认 false) */</span><br/><span class="hl-1"> </span><span class="hl-6">helperVisible</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 是否跳过全景图渲染 (仅渲染模型) */</span><br/><span class="hl-1"> </span><span class="hl-6">skipPanorama</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 是否 Y 轴翻转 (通常设为 true 以匹配 Canvas 2D 坐标系) */</span><br/><span class="hl-1"> </span><span class="hl-6">flipY</span><span class="hl-1">?: </span><span class="hl-7">boolean</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-8">/** 存储数组 (可选,复用数组以提升性能) */</span><br/><span class="hl-1"> </span><span class="hl-6">buffer</span><span class="hl-1">?: </span><span class="hl-7">Uint8Array</span><span class="hl-1"> | </span><span class="hl-7">Uint8ClampedArray</span><span class="hl-1">;</span><br/><span class="hl-1">}</span> </code><button type="button">Copy</button></pre> <h3 id="简写调用方式-不推荐" class="tsd-anchor-link">简写调用方式 (不推荐)<a href="#简写调用方式-不推荐" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <pre><code class="typescript"><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getPixels</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-6">x</span><span class="hl-1">: </span><span class="hl-6">number</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">y</span><span class="hl-1">: </span><span class="hl-6">number</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">width</span><span class="hl-1">: </span><span class="hl-6">number</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">height</span><span class="hl-1">: </span><span class="hl-6">number</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">pixelRatio</span><span class="hl-1">?: </span><span class="hl-6">number</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">flipY</span><span class="hl-1">?: </span><span class="hl-6">boolean</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">buffer</span><span class="hl-1">?: </span><span class="hl-6">Uint8Array</span><span class="hl-1"> | </span><span class="hl-6">Uint8ClampedArray</span><br/><span class="hl-1">): </span><span class="hl-6">Uint8Array</span><span class="hl-1"> | </span><span class="hl-6">Uint8ClampedArray</span><span class="hl-1">;</span> </code><button type="button">Copy</button></pre> <h2 id="concepts" class="tsd-anchor-link">Concepts<a href="#concepts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <h3 id="坐标系统-coordinate-system" class="tsd-anchor-link">坐标系统 (Coordinate System)<a href="#坐标系统-coordinate-system" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <ul> <li><strong>WebGL 坐标系</strong>: 原点在左下角。</li> <li><strong>Canvas 2D 坐标系</strong>: 原点在左上角。</li> <li><strong>flipY 参数</strong>: 当你需要将数据绘制到 Canvas 2D Context (<code>putImageData</code>) 时,通常需要将 <code>flipY</code> 设置为 <code>true</code>,否则图像是倒置的。</li> </ul> <h3 id="性能注意事项-performance" class="tsd-anchor-link">性能注意事项 (Performance)<a href="#性能注意事项-performance" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <ul> <li><code>five.getPixels</code> 会触发 WebGL 的 <code>readPixels</code> 操作,这是一个同步且耗时的操作(会阻塞 GPU 流水线)。</li> <li><strong>优化建议</strong>: <ul> <li>避免在每一帧都调用。</li> <li>尽量复用 <code>buffer</code> 数组,避免频繁创建新的 <code>Uint8Array</code>。</li> <li>仅获取需要的区域(<code>width</code> 和 <code>height</code> 越小越好)。</li> </ul> </li> </ul> <h2 id="examples" class="tsd-anchor-link">Examples<a href="#examples" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <h3 id="放大镜-magnifier" class="tsd-anchor-link">放大镜 (Magnifier)<a href="#放大镜-magnifier" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>这是一个经典的放大镜实现示例。通过获取鼠标周围的像素,并以更高的 <code>pixelRatio</code> 重新渲染,从而获得清晰的放大效果。</p> <pre><code class="typescript"><span class="hl-10">import</span><span class="hl-1"> </span><span class="hl-3">*</span><span class="hl-1"> </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-6">THREE</span><span class="hl-1"> </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;three&#39;</span><span class="hl-1">;</span><br/><span class="hl-10">import</span><span class="hl-1"> { </span><span class="hl-6">Five</span><span class="hl-1"> } </span><span class="hl-10">from</span><span class="hl-1"> </span><span class="hl-9">&#39;@realsee/five&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-8">// 假设有一个用于显示的 canvas</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">magnifierCanvas</span><span class="hl-1"> = </span><span class="hl-6">document</span><span class="hl-1">.</span><span class="hl-5">getElementById</span><span class="hl-1">(</span><span class="hl-9">&#39;magnifier-canvas&#39;</span><span class="hl-1">) </span><span class="hl-10">as</span><span class="hl-1"> </span><span class="hl-7">HTMLCanvasElement</span><span class="hl-1">;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">ctx</span><span class="hl-1"> = </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-5">getContext</span><span class="hl-1">(</span><span class="hl-9">&#39;2d&#39;</span><span class="hl-1">)!;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">magnifierSize</span><span class="hl-1"> = </span><span class="hl-11">200</span><span class="hl-1">; </span><span class="hl-8">// 放大镜尺寸 200px</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">scale</span><span class="hl-1"> = </span><span class="hl-11">2</span><span class="hl-1">; </span><span class="hl-8">// 放大倍数</span><br/><br/><span class="hl-8">// 预先创建 Buffer 以提升性能</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelWidth</span><span class="hl-1"> = </span><span class="hl-6">magnifierSize</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">;</span><br/><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelHeight</span><span class="hl-1"> = </span><span class="hl-6">magnifierSize</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">;</span><br/><span class="hl-3">let</span><span class="hl-1"> </span><span class="hl-6">magnifierImageData</span><span class="hl-1"> = </span><span class="hl-6">ctx</span><span class="hl-1">.</span><span class="hl-5">createImageData</span><span class="hl-1">(</span><span class="hl-6">pixelWidth</span><span class="hl-1">, </span><span class="hl-6">pixelHeight</span><span class="hl-1">);</span><br/><br/><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">on</span><span class="hl-1">(</span><span class="hl-9">&#39;gesture.mousemove&#39;</span><span class="hl-1">, (</span><span class="hl-6">event</span><span class="hl-1">) </span><span class="hl-3">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-8">// 1. 获取鼠标在 Canvas 上的坐标</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">mouse</span><span class="hl-1"> = </span><span class="hl-6">event</span><span class="hl-1">.</span><span class="hl-6">pointers</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">]?.</span><span class="hl-6">coords</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-10">if</span><span class="hl-1"> (!</span><span class="hl-6">mouse</span><span class="hl-1">) </span><span class="hl-10">return</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 转换归一化坐标 (-1 到 1) 到 像素坐标</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">renderSize</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getSize</span><span class="hl-1">(</span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">());</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">x</span><span class="hl-1"> = (</span><span class="hl-6">mouse</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">) / </span><span class="hl-11">2</span><span class="hl-1"> * </span><span class="hl-6">renderSize</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">y</span><span class="hl-1"> = (</span><span class="hl-6">mouse</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> + </span><span class="hl-11">1</span><span class="hl-1">) / </span><span class="hl-11">2</span><span class="hl-1"> * </span><span class="hl-6">renderSize</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 2. 获取像素数据</span><br/><span class="hl-1"> </span><span class="hl-8">// 注意:我们以更高的分辨率 (pixelRatio * scale) 渲染小区域,从而获得“无损”放大效果</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixelRatio</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-6">renderer</span><span class="hl-1">?.</span><span class="hl-5">getPixelRatio</span><span class="hl-1">() ?? </span><span class="hl-11">1</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">targetPixelRatio</span><span class="hl-1"> = </span><span class="hl-6">Math</span><span class="hl-1">.</span><span class="hl-5">ceil</span><span class="hl-1">(</span><span class="hl-6">pixelRatio</span><span class="hl-1"> * </span><span class="hl-6">scale</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getPixels</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">x:</span><span class="hl-1"> </span><span class="hl-6">x</span><span class="hl-1"> - </span><span class="hl-6">magnifierSize</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">, </span><span class="hl-8">// 居中</span><br/><span class="hl-1"> </span><span class="hl-6">y:</span><span class="hl-1"> </span><span class="hl-6">y</span><span class="hl-1"> - </span><span class="hl-6">magnifierSize</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">width:</span><span class="hl-1"> </span><span class="hl-6">magnifierSize</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">height:</span><span class="hl-1"> </span><span class="hl-6">magnifierSize</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">pixelRatio:</span><span class="hl-1"> </span><span class="hl-6">targetPixelRatio</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">flipY:</span><span class="hl-1"> </span><span class="hl-3">true</span><span class="hl-1">, </span><span class="hl-8">// 翻转以适配 Canvas 2D</span><br/><span class="hl-1"> </span><span class="hl-6">buffer:</span><span class="hl-1"> </span><span class="hl-6">magnifierImageData</span><span class="hl-1">.</span><span class="hl-6">data</span><span class="hl-1">, </span><span class="hl-8">// 复用 buffer</span><br/><span class="hl-1"> </span><span class="hl-6">helperVisible:</span><span class="hl-1"> </span><span class="hl-3">false</span><span class="hl-1">, </span><span class="hl-8">// 隐藏辅助线等干扰元素</span><br/><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 3. 将数据绘制到放大镜 Canvas 上</span><br/><span class="hl-1"> </span><span class="hl-8">// 需要调整 Canvas 尺寸以匹配数据</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-6">width</span><span class="hl-1"> = </span><span class="hl-6">pixelWidth</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-6">height</span><span class="hl-1"> = </span><span class="hl-6">pixelHeight</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">ctx</span><span class="hl-1">.</span><span class="hl-5">putImageData</span><span class="hl-1">(</span><span class="hl-6">magnifierImageData</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">, </span><span class="hl-11">0</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-8">// 4. 更新放大镜位置 (CSS)</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">left</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">x</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">magnifierSize</span><span class="hl-12"> </span><span class="hl-1">/</span><span class="hl-12"> </span><span class="hl-11">2</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-6">magnifierCanvas</span><span class="hl-1">.</span><span class="hl-6">style</span><span class="hl-1">.</span><span class="hl-6">top</span><span class="hl-1"> = </span><span class="hl-9">`</span><span class="hl-3">${</span><span class="hl-6">renderSize</span><span class="hl-12">.</span><span class="hl-6">y</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">y</span><span class="hl-12"> </span><span class="hl-1">-</span><span class="hl-12"> </span><span class="hl-6">magnifierSize</span><span class="hl-12"> </span><span class="hl-1">/</span><span class="hl-12"> </span><span class="hl-11">2</span><span class="hl-3">}</span><span class="hl-9">px`</span><span class="hl-1">; </span><span class="hl-8">// 注意 Y 轴方向</span><br/><span class="hl-1">});</span> </code><button type="button">Copy</button></pre> <h3 id="获取中心点颜色-color-picker" class="tsd-anchor-link">获取中心点颜色 (Color Picker)<a href="#获取中心点颜色-color-picker" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3> <p>获取屏幕中心点的颜色。</p> <pre><code class="typescript"><span class="hl-3">function</span><span class="hl-1"> </span><span class="hl-5">getCenterColor</span><span class="hl-1">(</span><span class="hl-6">five</span><span class="hl-1">: </span><span class="hl-7">Five</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">size</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getSize</span><span class="hl-1">(</span><span class="hl-3">new</span><span class="hl-1"> </span><span class="hl-4">THREE</span><span class="hl-1">.</span><span class="hl-5">Vector2</span><span class="hl-1">());</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">x</span><span class="hl-1"> = </span><span class="hl-6">size</span><span class="hl-1">.</span><span class="hl-6">x</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">y</span><span class="hl-1"> = </span><span class="hl-6">size</span><span class="hl-1">.</span><span class="hl-6">y</span><span class="hl-1"> / </span><span class="hl-11">2</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">pixels</span><span class="hl-1"> = </span><span class="hl-6">five</span><span class="hl-1">.</span><span class="hl-5">getPixels</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-6">x:</span><span class="hl-1"> </span><span class="hl-6">x</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">y:</span><span class="hl-1"> </span><span class="hl-6">y</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">width:</span><span class="hl-1"> </span><span class="hl-11">1</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">height:</span><span class="hl-1"> </span><span class="hl-11">1</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-6">flipY:</span><span class="hl-1"> </span><span class="hl-3">true</span><br/><span class="hl-1"> });</span><br/><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">r</span><span class="hl-1"> = </span><span class="hl-6">pixels</span><span class="hl-1">[</span><span class="hl-11">0</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">g</span><span class="hl-1"> = </span><span class="hl-6">pixels</span><span class="hl-1">[</span><span class="hl-11">1</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">b</span><span class="hl-1"> = </span><span class="hl-6">pixels</span><span class="hl-1">[</span><span class="hl-11">2</span><span class="hl-1">];</span><br/><span class="hl-1"> </span><span class="hl-3">const</span><span class="hl-1"> </span><span class="hl-4">a</span><span class="hl-1"> = </span><span class="hl-6">pixels</span><span class="hl-1">[</span><span class="hl-11">3</span><span class="hl-1">];</span><br/><br/><span class="hl-1"> </span><span class="hl-10">return</span><span class="hl-1"> </span><span class="hl-9">`rgba(</span><span class="hl-3">${</span><span class="hl-6">r</span><span class="hl-3">}</span><span class="hl-9">, </span><span class="hl-3">${</span><span class="hl-6">g</span><span class="hl-3">}</span><span class="hl-9">, </span><span class="hl-3">${</span><span class="hl-6">b</span><span class="hl-3">}</span><span class="hl-9">, </span><span class="hl-3">${</span><span class="hl-6">a</span><span class="hl-12"> </span><span class="hl-1">/</span><span class="hl-12"> </span><span class="hl-11">255</span><span class="hl-3">}</span><span class="hl-9">)`</span><span class="hl-1">;</span><br/><span class="hl-1">}</span> </code><button type="button">Copy</button></pre> <h2 id="common-pitfalls" class="tsd-anchor-link">Common Pitfalls<a href="#common-pitfalls" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <ol> <li> <p><strong>坑点1: 图像倒置</strong>:</p> <ul> <li><strong>现象</strong>: 获取到的图像是上下颠倒的。</li> <li><strong>解决</strong>: 检查 <code>flipY</code> 参数。如果直接用于 Canvas 2D <code>putImageData</code>,通常需要 <code>flipY: true</code>。</li> </ul> </li> <li> <p><strong>坑点2: 性能卡顿</strong>:</p> <ul> <li><strong>现象</strong>: 开启放大镜后,页面帧率显著下降。</li> <li><strong>解决</strong>: <ul> <li>确保使用了 <code>buffer</code> 参数复用内存。</li> <li>检查 <code>width</code> 和 <code>height</code> 是否过大。</li> <li>确保 <code>pixelRatio</code> 不要设置得过高(例如不要超过 4)。</li> </ul> </li> </ul> </li> <li> <p><strong>坑点3: 渲染内容不全</strong>:</p> <ul> <li><strong>现象</strong>: 放大镜里只有背景,没有模型。</li> <li><strong>解决</strong>: 检查 <code>skipPanorama</code> 参数。如果需要看全景图,确保设为 <code>false</code>(默认)。如果只想看模型细节(如在 Floorplan 模式),可以设为 <code>true</code>。</li> </ul> </li> </ol> <h2 id="related" class="tsd-anchor-link">Related<a href="#related" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2> <ul> <li><a href="api.html">API Reference</a>: Five 核心 API 说明。</li> </ul> <hr> <pre><code class="yaml"><span class="hl-0">tags</span><span class="hl-1">: [</span><span class="hl-2">截图</span><span class="hl-1">, </span><span class="hl-2">放大镜</span><span class="hl-1">, </span><span class="hl-2">取色器</span><span class="hl-1">, </span><span class="hl-2">颜色拾取</span><span class="hl-1">, </span><span class="hl-2">像素数据</span><span class="hl-1">, </span><span class="hl-2">getPixels</span><span class="hl-1">, </span><span class="hl-2">magnifier</span><span class="hl-1">, </span><span class="hl-2">screenshot</span><span class="hl-1">, </span><span class="hl-2">pixel</span><span class="hl-1">, </span><span class="hl-2">canvas</span><span class="hl-1">, </span><span class="hl-2">screen-capture</span><span class="hl-1">, </span><span class="hl-2">color-picker</span><span class="hl-1">]</span> </code><button type="button">Copy</button></pre> </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#获取屏幕像素-get-screen-pixels"><span>获取屏幕像素 (<wbr/>Get <wbr/>Screen <wbr/>Pixels)</span></a><ul><li><a href="#schema"><span>Schema</span></a></li><li><ul><li><a href="#推荐调用方式"><span>推荐调用方式</span></a></li><li><a href="#简写调用方式-不推荐"><span>简写调用方式 (不推荐)</span></a></li></ul></li><li><a href="#concepts"><span>Concepts</span></a></li><li><ul><li><a href="#坐标系统-coordinate-system"><span>坐标系统 (<wbr/>Coordinate <wbr/>System)</span></a></li><li><a href="#性能注意事项-performance"><span>性能注意事项 (<wbr/>Performance)</span></a></li></ul></li><li><a href="#examples"><span>Examples</span></a></li><li><ul><li><a href="#放大镜-magnifier"><span>放大镜 (<wbr/>Magnifier)</span></a></li><li><a href="#获取中心点颜色-color-picker"><span>获取中心点颜色 (<wbr/>Color <wbr/>Picker)</span></a></li></ul></li><li><a href="#common-pitfalls"><span>Common <wbr/>Pitfalls</span></a></li><li><a href="#related"><span>Related</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">如视 Five SDK</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>