Question

我基本上想在他的RAPPID环境中改变JointJS形状的颜色。

以下是我到目前为止以及我想要实现的目标的背景知识： 我有一个名为ChristmasTree的JointJS形状，它扩展了joint.dia.Element。基本上，构建这个ChristmasTree对象的svg字符串是树的路径（svg路径元素），上面有多个饰品（4个svg圆圈/椭圆形，有id＆＃39; s和类，我认为我可以用它来修改颜色）。

我通过svg字符串中的样式attr为饰品设置了一些初始值。一旦我将它放在左边的RAPPID菜单中，用户就可以拖动那个带有红球的圣诞树了。 问题### 1： 但我想在左侧菜单中放置第二个ChristmasTree形状，而不创建另一个有绿球的主要对象......我将如何实现这一目标？在我的下面的代码中， christmas_tree_style_2 应该覆盖.ornament类 ＆＃39;填充＆＃39;：＆＃34;＃00ff00＆＃34; ，但是没有（在左侧菜单中，它仍然是红色的）？事实上， christmas_tree_style_1 ，我也试图用蓝色球覆盖＆＃39;填充＆＃39;：＃3400ff＆＃34; ，但它仍然红色。如何实现形状的左导航覆盖？

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

以下是以下代码的重要部分。

这里也是一个实际的工作示例（但左导航初始覆盖和右导航督察颜色覆盖不起作用，因此我的2个问题）： http://armyofda12mnkeys.kissr.com/rappid_christmastree/index.html （抱歉，我无法找到一个CDN for rappid.js添加到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：如果要通过元素上的style属性更改它们，则需要从标记中删除attr属性。我从标记中删除了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颜色选择器进行修改）？

1 个答案: