首页 > 解决方案 > Autodesk Forge 查看器标记大文本被截断

问题描述

在 Forge Viewer 中加载 3D 模型时,我们会增加默认标记笔画和文本大小,如下所示:

proto.onEditModeChange = function() {
    if (this.is2d) {
        this.setStyles(0.0040, 0.02);
    } else {
        var currentStyles = this.core.getStyle();
        this.setStyles(currentStyles['stroke-width'] * 3, currentStyles['font-size'] * 3);
    }
};

proto.setStyles = function (strokeWidth, fontSize) {
    var styleObject = this.core.getStyle();
    styleObject['stroke-width'] = strokeWidth;
    styleObject['font-size'] = fontSize;
    this.core.setStyle(styleObject);
};

所以我们得到了笔画宽度和字体大小的默认样式,并将大小乘以 3,因为我们认为这是一个更好的默认大小。对于 2D 文件,我们硬编码了一个适合我们的大小。

我们现在在使用 3D 文件时遇到的问题是,当添加包含下降器的标记文本时,下降器会被切断。这是我写“pgqjy”的例子:

示例标记

较小的字体大小不会发生此问题。如何防止文本被截断?

我们使用 Forge Viewer 6.*

更新 1

感谢 Bryan 建议我在创建标记后编辑它的大小。不幸的是,它并没有解决问题 - 文本仍然被截断。似乎增加文本框的高度只是在文本上方增加了更多的空白。这就是我增加高度的方式:

proto.onHistoryChanged = function(e) {
    if (e.data.action === "execute" && e.data.targetId > 0) {
        var markup = this.core.getMarkup(e.data.targetId);

        if (markup && markup.type === "label" && markup.currentTextLines && markup.currentTextLines.length > 0) {
            markup.setSize(markup.position, markup.size.x, markup.currentTextLines.length * markup.lineHeight);
        }
    }
};

标签: autodesk-forge

解决方案


尝试增加文本框大小 - 您可以订阅MARKUPCORE.EVENT_HISTORY_CHANGED事件以在更改文本框后捕获文本框并设置其大小:

编辑:为什么不把所有的转换都移到事件回调中,这样我们就不需要捎带这个看起来有点老套的插件了

markupExt.addEventListener( Autodesk.Extensions.Markup.Core.EVENT_HISTORY_CHANGED, e=>{

   const textMarkup = markupExt.getMarkup(e.data.targetId);
   //check 'textMarkup.type' and 'label' is for textbox
   const currentStyles = textMarkup.getStyle();

   // be sure to wrap this in a control flow to check and only set size right after the textbox is first created to prevent interference with changes made by user

   textMarkup.setSize(textMarkup.position, textMarkup.size.x*3, textMarkup.size.y*3) 

   currentStyles['stroke-width'] *= 3, currentStyles['font-size'] *= 3;
   textMarkup.setStyle(currentStyles);
});

在此处输入图像描述

在此处输入图像描述


推荐阅读