HT 编辑器关于添加图元自定义属性和显示问题

今天碰到这个例子，先记录下来：

自定义属性在 config-customProperties.js 文件中，window.hteditor_config.customProperties 中定义

通过配置 hteditor_config.customProperties 可增加自定义属性，分为以下四种属性类型

    - customProperties.display: 增加图纸属性
    - customProperties.data: 增加图元属性
    - customProperties.symbol: 增加图标属性
    - customProperties.comp: 增加组件属性

window.hteditor_config.customProperties = {
    display: [
        {
            property: 'description', // 必填，属性名
            valueType: 'String', // 值类型，参见 valueTypes.txt
            name: 'Description', // 属性界面上的显示名称，可用 i18n 方式
            defaultValue: true, // 默认值，用于模型没有初始值时，属性界面显示的默认值
            accessType: 'a', // 'a' 代表 attr 属性；'p' 代表 get/set 属性。未指明时默认为 'a'
            editable: false // 默认值为 true，设置为 false 为不可编辑状态
        }
    ],
    data: [
        {
            property: 'description', // 必填，属性名
            valueType: 'String', // 值类型，参见 valueTypes.txt
            name: 'Description', // 属性界面上的显示名称，可用 i18n 方式
            defaultValue: true, // 默认值，用于模型没有初始值时，属性界面显示的默认值
            accessType: 'a', // 'a' 代表 attr 属性；'s' 代表 style 属性；'p' 代表 get/set 属性。未指明时默认为 'a'
            dataBinding: true, // 默认值为 false，代表是否追加数据绑定按钮
            editable: false // 默认值为 true，设置为 false 为不可编辑状态
        }
    ],
    symbol: [
        {
            property: 'description', // 必填，属性名
            valueType: 'String', // 值类型，参见 valueTypes.txt
            name: 'Description', // 属性界面上的显示名称，可用 i18n 方式
            defaultValue: true, // 默认值，用于模型没有初始值时，属性界面显示的默认值
            dataBinding: true, // 默认值为 false，代表是否追加数据绑定按钮
            editable: false // 默认值为 true，设置为 false 为不可编辑状态
        }
    ],
    comp: [
        {
            property: 'description'， // 必填，属性名
            valueType: 'String', // 值类型，参见 valueTypes.txt
            name: 'Description', // 属性界面上的显示名称，可用 i18n 方式
            defaultValue: true, // 默认值，用于模型没有初始值时，属性界面显示的默认值
            dataBinding: true, // 默认值为 false，代表是否追加数据绑定按钮
            editable: false // 默认值为 true，设置为 false 为不可编辑状态
        }
    ]
};

 定义完属性之后，要自定义一个浏览地址 html 用来自定义测试属性

 

接下来是该拓展属性的显示问题，需要让特定的图元显示这个自定义属性，需要为其设置一个过滤器。在 HT 编辑器的 config-inspectorFilter.js 文件当中，因为我的例子是为图元设置过滤器，所以设置的 isDataPropertyVisible 。我是将特定的属性和图元信息进行了过滤。忙活了半天就写了一行代码  = =   ，name 什么的都是用  console.log() 在编辑器的 Web 控制台查到的， name 属性实际是 string 字符串(很多属性，而且都是分开的)，data 是选中的图元对象，accessType 是 属性的类型吧（说不太好，'a', 's', 'p', undefined）。

isDataPropertyVisible: function(editor, data, accessType, name) {         
	if (data.getImage() !== 'symbols/fan.json' && name === 'a:isAnimation') {
		return false;
	}	
        return true;
 },

 这样，就把属性名为：a:isAnimation 的自定义属性和 symbols/fan.json 图元绑定在一起了。（只有这个图元被选中时才会显示 a:isAnimation 属性）。效果如下图，选中其他图元均不会显示自定义的那个属性。

 

 

转载于:https://www.cnblogs.com/htxzs/p/9498617.html