截屏批注
<h1>截屏批注 - Annotation</h1>
<p><code>BCore.Extension.Annotation</code> 是一个用于截屏批注的工具类，提供了一系列接口和配置以支持批注功能的实现。</p>
<h2>构造函数</h2>
<pre><code class="language-javascript">new BCore.Extension.Annotation(config)</code></pre>
<h3>参数</h3>
<ul>
<li><strong>config</strong>: <code>BCore.Extension.AnnotationConfig</code> - 截屏批注工具类的配置参数。</li>
</ul>
<h3>成员方法</h3>
<ul>
<li><code>beginPostil()</code> 开启批注</li>
<li><code>endPostil()</code> 关闭批注</li>
<li><code>getPostilScreenShot()</code> 生成批注截图</li>
<li><code>getPostilConfig()</code> 获取批注设置</li>
<li><code>setPostilConfig()</code> 设置批注设置</li>
<li><code>getPostilRecord()</code> 获取批注步骤记录</li>
<li><code>setPostilRecord(jsonstring)</code> 设置批注步骤记录</li>
<li><code>clearPostilRecord()</code> 清除批注步骤记录</li>
<li><code>wrapEventOn(eventType, func[, useCapture])</code> 画板上注册事件</li>
<li><code>wrapEventOff(eventType, func)</code> 清除画板上的事件</li>
<li><code>setPostilType(type)</code> 设置批注类型</li>
<li><code>setLineColor(color)</code> 设置线段颜色</li>
<li><code>setLineWidth(width)</code> 设置线段宽度</li>
<li><code>setFontSize(size)</code> 设置字体大小</li>
<li><code>setFontColor(color)</code> 设置字体颜色</li>
<li><code>getPostilType()</code> 获取批注类型</li>
<li><code>getLineColor()</code> 获取线段颜色</li>
<li><code>getLineWidth()</code> 获取线段宽度</li>
<li><code>getFontSize()</code> 获取字体大小</li>
<li><code>getFontColor()</code> 获取字体颜色</li>
<li><code>undo()</code> 回退</li>
<li><code>redo()</code> 前进</li>
</ul>
<p><br></p>
<h3>方法示例</h3>
<h4>1. 批注控制</h4>
<ul>
<li><code>beginPostil()</code> 开启批注</li>
<li><code>endPostil()</code> 关闭批注</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">var annotationConfig = new BCore.Extension.AnnotationConfig(viewer3D);
var annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil();
// annotation.endPostil();</code></pre>
<p><br></p>
<h4>2. 批注设置</h4>
<ul>
<li><code>getPostilConfig()</code> 获取当前的批注设置。</li>
<li><code>setPostilConfig(config)</code> 设置批注配置参数。</li>
<li><strong>参数</strong>:
<strong>config</strong>: <code>PostilConfig</code> - 包含配置字段 <code>isAutoSavePostilScreenShot</code>（点击保存时是否保存图片） 和 <code>isShowMessage</code>（是否显示消息提示）</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let annotationConfig = new BCore.Extension.AnnotationConfig(viewer3D);
var annotation = new BCore.Extension.Annotation(annotationConfig);
let annotation.beginPostil();
let config = annotation.getPostilConfig();
config.isShowMessage = false; // 不显示消息提示
config.isAutoSavePostilScreenShot = false; // 图片不自动下载
annotation.setPostilConfig(config);</code></pre>
<p><br></p>
<h4>3. 批注截图</h4>
<ul>
<li><code>getPostilScreenShot()</code> 生成并获取批注截图的 Base64 字符串。</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let annotationConfig = new BCore.Extension.AnnotationConfig(viewer3D);
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil();
let shotImage = annotation.getPostilScreenShot();</code></pre>
<ul>
<li>返回值说明
<strong>shotImage</strong> : <code>string</code> - 截图的Base64字符串</li>
</ul>
<p><br></p>
<h4>4. 批注步骤记录</h4>
<ul>
<li><code>getPostilRecord()</code> 获取批注步骤的。</li>
<li><code>setPostilRecord(jsonstring)</code> 设置批注步骤记录。</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let annotationConfig = new BCore.Extension.AnnotationConfig(viewer3D);
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil();
let str = annotation.getPostilRecord();
// draw something
//下次重新开启恢复
//...
annotation.setPostilRecord(str); // 恢复步骤</code></pre>
<h4>5. 事件管理</h4>
<ul>
<li><code>wrapEventOn(eventType, func[, useCapture])</code> 在画板上注册事件</li>
<li>
<p><code>wrapEventOff(eventType, func)</code> 清除画板上的事件</p>
</li>
<li><strong>参数</strong>:
<strong>eventType</strong> : <code>string</code> - 事件名称，如click,keydown
<strong>func</strong> : <code>Function</code> - 事件触发时要执行的回调函数</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let mApplication3DConfig = new BCore.Application.Application3DConfig();
mApplication3DConfig.enableFileList = true;
let mApplication3D = new BCore.Application.Application3D(mApplication3DConfig);
let mViewer3D = new BCore.Viewer.Viewer3D('bcorecontainer', new BCore.Viewer.Viewer3DConfig());
mViewer3D.initViewer3D('e4fdbabd2a7a4b9189bc3117bbb08995', '');
let annotationConfig = new BCore.Extension.AnnotationConfig(mViewer3D);
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil(); // 注册事件必须要在开始批注之后注册
const justRunOnce = () =&gt; {
console.log('我只执行一次')
annotation.wrapEventOff('click', justRunOnce)
}
annotation.wrapEventOn('click', justRunOnce)</code></pre>
<p><br></p>
<h3>6.获取和设置批注属性</h3>
<ul>
<li><code>getPostilType()</code> 获取批注类型</li>
<li>
<p><code>setPostilType(type)</code> 设置批注类型</p>
</li>
<li><strong>参数</strong>:
<strong>type</strong> : <code>BCore.Static.PostilType</code> - 批注的类型</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let mApplication3DConfig = new BCore.Application.Application3DConfig();
let mApplication3D = new BCore.Application.Application3D(mApplication3DConfig);
let mViewer3D = new BCore.Viewer.Viewer3D('bcorecontainer', new BCore.Viewer.Viewer3DConfig());
mViewer3D.initViewer3D('5a6e22d70e18279d4c9f56968b402423');
let annotationConfig = new BCore.Extension.AnnotationConfig(mViewer3D);
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil()
let type = annotation.getPostilType()
// 设置批注类型
//annotation.setPostilType(BCore.Static.PostilType.REACT)</code></pre>
<p><br></p>
<h3>7.获取和设置批注字体大小</h3>
<ul>
<li><code>getFontSize()</code> 获取批注字体大小</li>
<li>
<p><code>setFontSize(size)</code> 设置批注字体大小</p>
</li>
<li><strong>参数</strong>:
<strong>fontSize</strong> : <code>number</code> - 字体大小</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let mApplication3DConfig = new BCore.Application.Application3DConfig();
let mApplication3D = new BCore.Application.Application3D(mApplication3DConfig);
let mViewer3D = new BCore.Viewer.Viewer3D('bcorecontainer', new BCore.Viewer.Viewer3DConfig());
mViewer3D.initViewer3D('5a6e22d70e18279d4c9f56968b402423');
let annotationConfig = new BCore.Extension.AnnotationConfig(mViewer3D);
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil()
console.log(annotation.getFontSize()) // 打印当前批注字体大小
annotation.setFontSize(20) //设置批注字体大小为20(像素)</code></pre>
<p><br></p>
<h3>8.获取和设置批注字体颜色</h3>
<ul>
<li><code>getFontColor()</code> 获取批注字体颜色</li>
<li>
<p><code>setFontColor(color)</code> 设置批注字体颜色</p>
</li>
<li><strong>参数</strong>:
<strong>fontColor</strong> : <code>string</code> - 字体颜色</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let mApplication3DConfig = new BCore.Application.Application3DConfig();
let mApplication3D = new BCore.Application.Application3D(mApplication3DConfig);
let mViewer3D = new BCore.Viewer.Viewer3D('bcorecontainer', new BCore.Viewer.Viewer3DConfig());
mViewer3D.initViewer3D('5a6e22d70e18279d4c9f56968b402423');
let annotationConfig = new BCore.Extension.AnnotationConfig(mViewer3D);
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil()
console.log(annotation.getFontColor()) //获取当前批注字体颜色
annotation.setFontColor('orange') //设置批注字体颜色</code></pre>
<p><br></p>
<h3>9.获取和设置批注线条宽度</h3>
<ul>
<li><code>getLineWidth()</code> 获取批注线条宽度</li>
<li>
<p><code>setLineWidth(width)</code> 设置批注线条宽度</p>
</li>
<li><strong>参数</strong>:
<strong>lineWidth</strong> : <code>number</code> - 线条宽度</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let mApplication3DConfig = new BCore.Application.Application3DConfig();
let mApplication3D = new BCore.Application.Application3D(mApplication3DConfig);
let mViewer3D = new BCore.Viewer.Viewer3D('bcorecontainer', new BCore.Viewer.Viewer3DConfig());
mViewer3D.initViewer3D('5a6e22d70e18279d4c9f56968b402423');
let annotationConfig = new BCore.Extension.AnnotationConfig(mViewer3D);
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil()
console.log(annotation.getLineWidth()) //打印当前批注线条宽度
annotation.setLineWidth(10) //设置批注线条宽度</code></pre>
<p><br></p>
<h3>10.获取和设置批注线条颜色</h3>
<ul>
<li><code>getLineColor()</code> 获取批注线条颜色</li>
<li>
<p><code>setLineColor(color)</code> 设置批注线条颜色</p>
</li>
<li><strong>参数</strong>:
<strong>lineColor</strong> : <code>string</code> - 线条颜色</li>
</ul>
<h4>示例</h4>
<pre><code class="language-javascript">let mApplication3DConfig = new BCore.Application.Application3DConfig();
let mApplication3D = new BCore.Application.Application3D(mApplication3DConfig);
let mViewer3D = new BCore.Viewer.Viewer3D('bcorecontainer', new BCore.Viewer.Viewer3DConfig());
mViewer3D.initViewer3D('5a6e22d70e18279d4c9f56968b402423');
let annotationConfig = new BCore.Extension.AnnotationConfig(mViewer3D);
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil()
console.log(annotation.getLineColor()) //打印当前批注线条颜色
annotation.setLineColor('orange') //设置批注线条颜色</code></pre>
<p><br></p>
<h3>11.撤销和恢复</h3>
<ul>
<li><code>undo()</code> 撤销上一步操作。</li>
<li><code>redo()</code> 恢复上一步被撤销的操作。</li>
</ul>
<h3>示例</h3>
<pre><code class="language-javascript">let mApplication3DConfig = new BCore.Application.Application3DConfig();
let mApplication3D = new BCore.Application.Application3D(mApplication3DConfig);
let mViewer3D = new BCore.Viewer.Viewer3D('bcorecontainer', new BCore.Viewer.Viewer3DConfig());
mViewer3D.initViewer3D('5a6e22d70e18279d4c9f56968b402423');
let annotation = new BCore.Extension.Annotation(annotationConfig);
annotation.beginPostil()
annotation.undo(); // 撤销
annotation.redo(); // 恢复</code></pre>
<h2>总结</h2>
<p><code>BCore.Extension.Annotation</code> 提供了全面的接口用于在3D视图中进行批注操作，既支持基础的开始与结束控制，也提供了各种批注设置和事件管理功能。通过其丰富的接口，用户可以灵活地实现多种批注需求。</p>