更改JointJS Rappid对象的颜色(通过修改左导航菜单中的不同实例并通过Rappid Inspector颜色选择器进行修改)?

时间:2017-01-09 06:04:43

标签: jointjs rappid

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

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

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

问题### 2: 假装你帮我解决以前的问题。您可以将左侧菜单导航中的2个多色ChristmasTree拖放到主RAPPID内容区域。 我现在想通过检查员动态更改颜色。 我添加了一个颜色检查器,它显示在每个元素的RAPPID右导航菜单中:     ' ornament_fill':{label:'圣诞树装饰的颜色',键入:' color',group:' 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);
    }
}

1 个答案:

答案 0 :(得分:1)

问题1:如果要通过元素上的style属性更改它们,则需要从标记中删除attr属性。我从标记中删除了fillstrokestroke-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'
        }
    }
});

enter image description here

问题#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
        });