图片属性

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

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

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

在设计器中效果如下：

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

1. 禁止选择SVG图片。

设置ImageValuePropertyAttribute的 SupportSvg属性。

代码：

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

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

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

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

设置ImageValuePropertyAttribute 的 DefaultIconColor 属性。

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

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

效果：

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

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

设置ImageValuePropertyAttribute 的 DefaultActiveTabIndex 属性。

代码：

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

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

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

设置ImageValuePropertyAttribute 的 SupportUseCellColor 属性。

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

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

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

设置ImageValuePropertyAttribute 的 DefaultUseCellColor 属性。

代码：

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

效果：

JavaScript 中的图片处理

在活字格中，图片使用分为三种情况：

普通图片
SVG图片
内置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个属性：

IsBuiltIn：表示是否为内建图标。
Name：表示图片名称。
Color：SVG 图片颜色，只有图片为SVG图片并且UseCellTypeForeColor时有效。
UseCellTypeForeColor：SVG 图片使用单元格字体颜色，只有SVG 图片有效。