javascript - 圈子上的共享地点

Question

我正在尝试在所有圆圈之间创建可点击的字段。有什么想法吗？

我的代码:http://jsfiddle.net/LKHSw/

    var bok = 700,
    width = bok,
    height = width,
    radius = bok / 5,
    stage = new Kinetic.Stage({
        container: 'container',
        width: width,
        height: height
    });
var layer = new Kinetic.Layer();

var a = new Kinetic.Circle({
    x: bok / 3,
    y: bok / 3,
    radius: radius,
    fill: 'red'
});
var b = new Kinetic.Circle({
    x: a.getX() + radius,
    y: a.getY(),
    radius: radius,
    fill: 'blue'
});
var c = new Kinetic.Circle({
    x: (b.getX() + a.getX()) / 2,
    y: a.getY() + radius,
    radius: radius,
    fill: 'green'
});


var clipper = function (ctx, clipped, clip, self) {
    ctx.beginPath();
    ctx.arc(clip.getX(), clip.getY(), clip.getRadius(), 0, 2 * Math.PI, false);
    ctx.clip();

    ctx.beginPath();
    ctx.arc(clipped.getX(), clipped.getY(), clipped.getRadius(), 0, 2 * Math.PI, false);

    ctx.fillStrokeShape(self);
};

var ab = new Kinetic.Shape({
    drawFunc: function (context) {
        clipper(context, a, b, this);
    },
    fill: 'yellow'
});
var bc = new Kinetic.Shape({
    drawFunc: function (context) {
        clipper(context, b, c, this);
    },
    fill: 'pink'
});
var ca = new Kinetic.Shape({
    drawFunc: function (context) {
        clipper(context, c, a, this);
    },
    fill: 'orange'
});

layer.add(a);
layer.add(b);
layer.add(c);
layer.add(ab);
layer.add(bc);
layer.add(ca);

var hover = function (shape) {
    var defaultColor;
    shape.on('mouseover', function () {
        defaultColor = shape.getFill();
        shape.setFill('black');
        layer.draw();
    }).on('mouseout', function () {
        shape.setFill(defaultColor);
        layer.draw();
    });
};

hover(a);
hover(b);
hover(c);
hover(ab);
hover(bc);
hover(ca);

stage.add(layer);

Answer 1

这是使用 Clipper 函数的粗略实现:( updated fiddle )

var clipper2 = function (ctx, clipped, clip1, clip2, self) {
    ctx.beginPath();
    ctx.arc(clip1.getX(), clip1.getY(), clip1.getRadius(), 0, 2 * Math.PI, false);
    ctx.clip();
    ctx.beginPath();
    ctx.arc(clip2.getX(), clip2.getY(), clip2.getRadius(), 0, 2 * Math.PI, false);
    ctx.clip();

    ctx.beginPath();
    ctx.arc(clipped.getX(), clipped.getY(), clipped.getRadius(), 0, 2 * Math.PI, false);

    ctx.fillStrokeShape(self);
};

并声明你的形状如下 -

var abc = new Kinetic.Shape({
    drawFunc: function (context) {
        clipper2(context, c, a, b, this);
    },
    fill: 'white'
});