[]
        
(Showing Draft Content)

图片属性

如果属性表示图片或图标,希望使用图片选择编辑器编辑属性,可以通过标注ImageValuePropertyAttribute 的方式设置。

注意:标注ImageValuePropertyAttribute的属性类型必须是 object 或 ImageValue。

    public class MyPluginCommand : Command
    {
        [ImageValueProperty]
        public object MyProperty { get; set; }
    }

在设计器中效果如下:



如果需要更细致的控制,需要使用 ImageValuePropertyAttribute标注来控制。

1. 禁止选择SVG图片。

  1. 设置ImageValuePropertyAttribute的 SupportSvg属性。

  2. 代码:

        public class MyPluginCommand : Command
        {
            [ImageValueProperty(SupportSvg = false)]
            public object MyProperty { get; set; }
        }
  3. 效果:

    在图片选择对话框中只允许选择或上传普通图片,不能选择或上传SVG图片。


2. 设置内置图标默认值。

例如内建单元格中如果没有设置图标,按钮的图标默认值是白色的,文本框的图标默认是灰色的。

  1. 设置ImageValuePropertyAttribute 的 DefaultIconColor 属性。

  2. 代码。关于活字格中的颜色字符串表示法,请参考 颜色属性

        public class MyPluginCommand : Command
        {
            [ImageValueProperty(DefaultIconColor = "Accent 2")]
            public object MyProperty { get; set; }
        }
  3. 效果:


3. 设置默认选中的标签页。

如果该属性大部分情况下推荐用户使用内建图标,应该把默认标签页设置为“内置图标”。

  1. 设置ImageValuePropertyAttribute 的 DefaultActiveTabIndex 属性。

  2. 代码:

        public class MyPluginCommand : Command
        {
            [ImageValueProperty(DefaultActiveTabIndex = 1)]
            public object MyProperty { get; set; }
        }
  3. 效果:


  4. 说明:

    默认值为0表示默认标签页为本地图片,如果设置为 1 表示默认选中内置图标,其他值无效。

4. 禁止图标使用单元格字体颜色。

  1. 设置ImageValuePropertyAttribute 的 SupportUseCellColor 属性。

  2. 代码。关于活字格中的颜色字符串表示法,请参考 颜色属性

        public class MyPluginCommand : Command
        {
            [ImageValueProperty(SupportUseCellColor = false)]
            public object MyProperty { get; set; }
        }

5. 图标默认设置为使用单元格字体颜色。

  1. 设置ImageValuePropertyAttribute 的 DefaultUseCellColor 属性。

  2. 代码:

        public class MyPluginCommand : Command
        {
            [ImageValueProperty(DefaultUseCellColor = true)]
            public object MyProperty { get; set; }
        }
  3. 效果:


JavaScript 中的图片处理

在活字格中,图片使用分为三种情况:

  1. 普通图片

  2. SVG图片

  3. 内置SVG图标

class MyPluginCommand extends Forguncy.Plugin.CommandBase{
    execute() {
        const image = this.CommandParam.MyProperty;
        if (image && image.Name) {
            let src = "";
            if (image.BuiltIn) {
                // 构建内建图标URL
                src = Forguncy.Helper.SpecialPath.getBuiltInImageFolderPath() + image.Name;
            }
            else {
                // 构建用户上传图片URL
                src = Forguncy.Helper.SpecialPath.getImageEditorUploadImageFolderPath() + encodeURIComponent(image.Name);
            }
            if (Forguncy.ImageDataHelper.IsSvg(src)) {
                // 如果是SVG需要发送请求获取SVG DOM结构,因为需要修改SVG的颜色,不能直接使用Image的src属性
                $.get(src, (data) => {
                    const svg = $(data.documentElement);
                    Forguncy.ImageHelper.preHandleSvg(svg, image.UseCellTypeForeColor ? "currentColor" : image.Color);
                    svg.css("height", 100);
                    $(document.body).prepend(svg);
                });
            }
            else {
                document.body.style.backgroundImage = `url(${src})`;
            }
        }
    }
}

Forguncy.Plugin.CommandFactory.registerCommand("MyPlugin.MyPluginCommand, MyPlugin", MyPluginCommand);

实际上图片类型的属性会在生成一个JavaScript对象,这个JavaScript对象包含4个属性:

  1. IsBuiltIn: 表示是否为内建图标。

  2. Name:表示图片名称。

  3. Color:SVG 图片颜色,只有图片为SVG图片并且UseCellTypeForeColor时有效。

  4. UseCellTypeForeColor:SVG 图片使用单元格字体颜色,只有SVG 图片有效。