在Raphael / Joint.js中将多部电影放在一个圆圈中 [英] Putting multiple films in a circle in Raphael/Joint.js

问题描述

我在joint.js中有一个FSA，我需要将状态（圆圈）半圆填充到特定的比例，如1/2或1/6，从圆的底部开始。棘手的部分是它需要完成两次 - 更大的半填充和更小的半填充。

I have an FSA in joint.js, and I need to make the states (circles) semi-filled to specific ratios, like 1/2 or 1/6, starting from the bottom of the circle. The tricky part is that it needs to be done twice - A larger semi-fill and a smaller semi-fill over it.

这就是我想要做的事情：

This is what i am trying to do:

我对如何实现这一点感到迷茫。

I'm lost as to how to accomplish this.

推荐答案

诀窍是创建三个SVG圆并为它们定义剪辑路径。以下示例使用自定义SVG标记创建自定义JointJS形状（继承自fsa.State），该标记启用您在图像中显示的着色：

The trick is to create three SVG circles and define clip paths for them. The following example creates a custom JointJS shape (inheriting from fsa.State) with custom SVG markup that enables the coloring that you have shown in the image:

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 400, model: graph });

joint.shapes.fsa.MyState = joint.shapes.fsa.State.extend({

    markup: [
        '<g class="rotatable"><g class="scalable">',
        '<clipPath id="clip-top1"><rect x="-30" y="0" width="60" height="30"/></clipPath>',
        '<clipPath id="clip-top2"><rect x="-30" y="15" width="60" height="30"/></clipPath>',
        '<circle class="a"/><circle class="b"/><circle class="c"/>',
        '</g><text/></g>'
    ].join(''),

    defaults: joint.util.deepSupplement({
        type: 'fsa.MyState',
        size: { width: 60, height: 60 },
        attrs: {
            'circle': { fill: 'white' },
            '.b': { fill: 'red', 'clip-path': 'url(#clip-top1)' },
            '.c': { fill: 'blue', 'clip-path': 'url(#clip-top2)' }
        }
    }, joint.shapes.fsa.State.prototype.defaults)
});

var mystate1 = new joint.shapes.fsa.MyState({
    position: { x: 50, y: 50 },
    size: { width: 100, height: 100 },
    attrs: { text: { text: 'my state 1' } }
});
graph.addCell(mystate1);

var mystate2 = new joint.shapes.fsa.MyState({
    position: { x: 50, y: 160 },
    size: { width: 50, height: 50 }
});
graph.addCell(mystate2);

这篇关于在Raphael / Joint.js中将多部电影放在一个圆圈中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！