自定义动态图章

动态图章与标准图章的区别

类型	依赖条件	需要准备的文件	支持的内容
动态图章	uix-addons/customer-dynamic-stamp 是必需的。默认情况下，此插件包含在 AllInOne.js 中。如果您没有使用 AllInOne.js，请确保在 PDFUI 初始化中引用了此插件。	图片	支持设置背景图片、文本、字体、颜色及其位置
标准图章	无	PDF 和 svg	image

创建自定义动态图章的流程

我们在 Complete WebViewer (以下简称UI) 中提供了一套默认的动态图章操作流程。您可以访问Comment-> Create-> Create Dynamic Stamp 来体验这个功能。 这个实现的逻辑流程如下：

1. UI 默认提供前端预处理的背景图片。
2. 用户输入动态图章所需的目录、名字与文本等信息后，UI 会将这些数据传输给 PDF Data 层。
3. PDF Data 层根据步骤#1和#2收到的数据，绘制预处理图片并生成文本表单域，实时更新表单域数据，导出图片，传给 UI 层，做为图章列表的图章图片 (icon)。
4. 用户从图章列表中选择步骤#3中创建的动态图章 icon，在页面点击创建图章时，图章数据会与 PDF Data 层同步， 预示动态图章创建成功。

创建自定义动态图章

UI 方式创建自定义动态图章

用户可以通过点击 UI 上的 Comment-> Create-> Create Dynamic Stamp 来直接创建自定义动态图章。其中动态图章的背景图片可以通过接口方式传入并由用户管理。以下代码将展示如何通过导入、删除等操作来管理动态图章的背景图片。

// Get the dropdown component of custom dynamic stamp template
const templates = await pdfui.getComponentByName("stamp-templates");
// Import the dropdown button and its callback function through append method
templates.append("<dropdown-button name='test' url='xxx.png'>test</dropdown-button>", [{
    target: 'test',
    config: {
        // Set the callback function
        callback: async function () {
            // Get the dialog component of custom dynamic stamp
            const dialog = await pdfui.getComponentByName("fv--custom-dynamic-stamp-dialog")
            // Set the corresponding template information
            dialog.controller.selectTemplate({ name: 'test', url: "xxx.png" })
        }
    }
}])

接口方式创建自定义动态图章

添加一个自定义动态图章

var param = [{
     category:'stamp',
     name:'MyStamp',
     fileData:'http://stamp.png',
     field:{
        textType:PDFViewCtrl.PDF.constant.STAMP_TEXT_TYPE.CUSTOM_TEXT,
        value:'custom text', // the custom text
        font:{ // optional
            name:'Helvetica', //font family
            color:0, // text color
        },
        rect:{  // pdfRect
            left:0,
            right:30,
            top:30,
            bottom:0,
        }
     },
}]
// Add a custom dynamic stamp
pdfui.callAddonAPI( 'CustomDynamicStamp',  'setDynamicStamp',[param])

移除一个自定义动态图章

var param = [{
    category:'stamp',// The directory of the dynamic stamp
    names:[
        'MyStamp', // The name of the dynamic stamp
    ]
}]
// Remove a custom dynamic stamp
pdfui.callAddonAPI( 'CustomDynamicStamp',  'removeDynamicStamp',[param])

获取所有自定义动态图章

// Get dynamic stamps
pdfui.callAddonAPI( 'CustomDynamicStamp',  'getDynamicStamp')