Skip to content

颜色属性

如果属性表示颜色,希望使用颜色编辑器编辑属性,可以通过标注ColorPropertyAttribute 的方式设置。
注意,标注ColorPropertyAttribute的属性类型必须是 string

csharp
    public class MyPluginCellType : CellType
    {
        [ColorProperty]
        public string MyProperty { get; set; }
    }

在设计器中效果如下

1669466341465-a8fd476c-51bb-43c5-8275-3bc41ddd2d73.png

如果需要更细致的控制,可以通过ColorPropertyAttribute的其他属性来控制

  1. 控制是否显示无填充色
    1. 设置ColorPropertyAttribute 的 SupportNoFill 属性
    2. 代码
csharp
    public class MyPluginCellType : CellType
    {
        [ColorProperty(SupportNoFill = true)]
        public string MyProperty { get; set; }
    }
3. 效果  

1669466443353-9f017666-9fd0-4ea2-ab03-fe3652304f5f.png 2. 控制支持选择半透明色 1. 设置ColorPropertyAttribute 的 SupportTranslucency 属性 2. 代码

csharp
    public class MyPluginCellType : CellType
    {
        [ColorProperty(SupportTranslucency = true)]
        public string MyProperty { get; set; }
    }
3. 效果  

1693546494628-306b34e6-cf73-49ea-a5cb-8de40df42483.png 4. 说明 1. 本特性要求活字格版本大于等于9.0.100.0

JavaScript 中的颜色处理

在活字格中,所有颜色都使用字符串处理,颜色分为两类

  1. 普通颜色
    普通颜色采用ARGB表示法,使用井号加8位16进制数字表示 (例如:#FFFFFFFF) ,八位16进制数字分为4组,第一组表示透明度,第二组表示红色值(R值)第二组表示绿色值(G值)最后一组表示蓝色值(B值)
  2. 主题颜色
    主题颜色表示法为 颜色名称+主题色序号+亮度变化值。
    示例:Accent 1 40 50 表示色表中的第5列主色,亮度增加 40%,透明度为 50%
    1. 在活字格的色表中,共有10列,对应的主题色名称加序号分别是 Background 1,Background 2,Text 1,Text 2,Accent 1,Accent 2,Accent 3,Accent 4, Accent 5,Accent 6
    2. 第三位表示亮度,取值范围在 -100到100之间,正数为亮度增加,负数为亮度减少,数值为增加或减少的百分比,为0时可以省略

通过分析字符串可以得到用户设置的值,通常情况下,开发者不需要自行分析字符串,因为活字格已经提供了工具方法Forguncy.ConvertToCssColor来转换活字格的颜色表示法到浏览器中的 CSS 颜色表示法。
示例代码

javascript
class MyPluginCellType extends Forguncy.Plugin.CellTypeBase {
    createContent() {
        const propValue = this.CellElement.CellType.MyProperty;
        const cssColor = Forguncy.ConvertToCssColor(propValue);
        const div = $("<div>" + propValue + "<div>");
        div.css("background-color", cssColor);
        return div;
    }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("MyPlugin.MyPluginCellType, MyPlugin", MyPluginCellType);

更新: 2023-09-01 13:36:01
原文: https://www.yuque.com/robert-bh51n/ea8l6c/rqzlxkcdg1nonyf3