# # 自定义动态图章

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

类型 | 依赖条件 | 需要准备的文件 | 支持的内容
--- | --- | --- | ---
动态图章 | 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')