更改 JointJS Rappid 对象的颜色（通过修改左侧导航菜单中的不同实例以及通过 Rappid Inspector 颜色选择器进行修改）？

Question

我基本上想在我正在试用的 RAPPID 环境中更改 JointJS 形状的颜色。

以下是我目前的一些背景知识以及我想要实现的目标： 我有一个名为 ChristmasTree 的 JointJS 形状，它扩展了 joint.dia.Element。基本上构建这个 ChristmasTree 对象的 svg 字符串是树的路径（svg 路径元素），它上面有多个装饰品（4 svg circles/ellipses 有 id 和 classes 我假设我可以用于修改颜色）。

我通过 svg 字符串中的样式属性为饰品设置了一些初始值。一旦我把它放在左侧的 RAPPID 菜单中，用户就可以拖动那棵上面有红球的圣诞树，耶。 问题 ###1： 但我想在左侧菜单中放置第二个圣诞树形状，而不创建另一个具有绿球的主要对象......我将如何实现这一目标？在我下面的代码中，christmas_tree_style_2 应该覆盖 .ornament class 'fill': "#00ff00"，但不是（在左侧菜单中，它仍然是红色的）？其实christmas_tree_style_1，我也试过用蓝球覆盖'fill': "#0000ff"，但是它仍然是红色的。如何实现形状的左导航覆盖？

问题 ###2： 假装你帮我解决了之前的问题。您可以将 2 个多色圣诞树从左侧菜单导航拖放到主 RAPPID 内容区域。我现在想通过检查器动态更改颜色。我为每个元素添加了一个颜色检查器，它显示在 RAPPID 的右导航菜单中： 'ornament_fill': { label: '圣诞树装饰的颜色', type: 'color', group: 'generalinfo', index: 2 } 但不确定如何创建一个事件来动态改变装饰品的颜色。任何的想法？谢谢！

下面是代码的重要部分。

这也是一个实际的工作示例（但是左侧导航初始覆盖和右侧导航检查器颜色覆盖不起作用，因此我的 2 个问题）： http://armyofda12mnkeys.kissr.com/rappid_christmastree/index.html （抱歉，我找不到 rappid.js 的 CDN 以添加到 JSFiddle，因此更容易将文件夹上传到站点）。适用于我的问题的文件是 app.js 和 rappid-custom-shapes.js.

#

//svg for Christmas Tree + its ornaments... will be added to ChristmasTree shape/obj below
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />

<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>

<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>

<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>

<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";

#

//default Christmas Tree
joint.shapes.basic.ChristmasTree = joint.dia.Element.extend({

            markup: ChristmasTreeSVGstr,
            defaults: joint.util.deepSupplement({
                type: "basic",              
                                name: 'Initial Christmas Tree label text',                              
                size: {
                    width: 20,
                    height: 20
                },
                attrs: {
                    ".christmastreestroke": {
                        stroke: 'green',
                                                'stroke-width': '100px',
                        'fill-opacity': 1,
                        width: 10,
                        height: 15
                    },
                                        ".ornament": {
                                                'fill': "#00ff00",
                        'fill-opacity': 1                                               
                    },
                                        "#ornament3": {
                                                'fill': "#0000FF",
                                                'stroke': "green",
                                                'stroke-width': '5px',
                                                'fill-opacity': .5          
                    }
                }
            }, joint.dia.Element.prototype.defaults)
});

#

//RAPPID left menu christmas trees (2 variations of the initial ChristmasTree object, so I need to override some of the colors)
var christmas_tree_style_1 = new joint.shapes.basic.ChristmasTree({
    position: { x: 0, y: 0 },
        size: {
            width: 40,
            height: 50
    },
        attr: {
            ".christmastreestroke": {
                stroke: 'green',
                'stroke-width': '100px',
                'fill-opacity': 1,
            },
            ".ornament": {
                    'fill': "#0000ff",
                    'fill-opacity': 1                                               
            },
            "#ornament3": {
                    'fill': "#0000FF",
                    'stroke': "green",
                    'stroke-width': '5px',
                    'fill-opacity': .5          
            }

        }
});
var christmas_tree_style_2 = new joint.shapes.basic.ChristmasTree({
    position: { x: 0, y: 0 },
        size: {
            width: 40,
            height: 50
    },
        attr: {
            ".christmastreestroke": {
                stroke: 'blue',
                'stroke-width': '100px',
                'fill-opacity': 1,
            },
            ".ornament": {
                    'fill': "#00ff00",
                    'fill-opacity': 1                                               
            },
            "#ornament3": {
                    'fill': "yellow",
                    'stroke': "yellow",
                    'stroke-width': '5px',
                    'fill-opacity': 1           
            }

        }
});
//add to left menu
stencil.load([christmas_tree_style_1, christmas_tree_style_2], 'customchristmastrees');

#

//add it to the inspector
function createInspector(cellView) {
    if (!inspector || inspector.options.cellView !== cellView) {

        if (inspector) {
            // Set unsaved changes to the model and clean up the old inspector if there was one.
            inspector.updateCell();
            inspector.remove();
        }
                //if(cellView.$el.hasClass('class')) // certain element should get certain things more in inspector?
                //how to determine different shapes?

        inspector = new joint.ui.Inspector({
            inputs: {
                'name':       { label: 'Name of Christmas Tree',  type: 'text',     group: 'generalinfo', index: 1 },                               

                                'ornament_fill':       { label: 'Color of christmas-tree-ornaments fill',  type: 'color',    group: 'generalinfo', index: 2 },

            },
            groups: {
                generalinfo: { label: 'General Info', index: 1 },                
            },
            cellView: cellView
        });
        $('.inspector-container').html(inspector.render().el);
    }
}

Answer 1

问题 #1：如果您想通过元素上的 attr 属性更改它们，您需要从标记中删除 style 属性。我从标记中删除了 fill、stroke、stroke-width：

var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />

<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>

<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>

<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>

<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";

那么你可以自定义形状如下：

var rb = new joint.shapes.basic.ChristmasTree({
    position: { x: 50, y: 50 },
    size: { width: 100, height: 150 },
    attrs: {
        ".ornament": {
            'fill-opacity': 1,
            stroke: 'pink',
            'stroke-width': 5,
            fill: 'blue'
        }
    }
});

问题 #2：

如果您解决了问题 #1，您可以直接将值与 attrs:

同步

inspector = new joint.ui.Inspector({
            inputs: {
                'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },

                attrs: {
                    '.ornament': {
                        fill: {
                            label: 'Color of christmas-tree-ornaments fill',
                            type: 'color',
                            group: 'generalinfo',
                            index: 2
                        }
                    }
                },

            },
            groups: {
                generalinfo: { label: 'General Info', index: 1 },
            },
            cellView: cellView
        });

更改 JointJS Rappid 对象的颜色（通过修改左侧导航菜单中的不同实例以及通过 Rappid Inspector 颜色选择器进行修改）？

Change color of JointJS Rappid object (via modifying different instance in the left-nav menu and also modify via Rappid Inspector color picker)?

jointjs

rappid