kineticjs组缓存和图层绘制隐藏了动态弧形 [英] kineticjs group cache and layer draw is hiding kinetic arc shapes

问题描述

我正在创建一个圆形作为一组动力学弧。当我缓存组并随后在图层上调用绘图功能时，隐藏了四分之三的圆。我认为layer.draw可能需要一个偏移，但实际上我只是在猜测。当我从弧线中删除填充，描边或不透明度或从缓存调用中删除对象文字时，将显示整圆。 http://jsfiddle.net/leydar/gm2FT/5/ 感谢任何见解。

I am creating a circle as a group of kinetic arcs. When I cache the group and subsequently call the draw function on the layer, three quarters of the circle are hidden. I think layer.draw may require an offset but really I'm only guessing. When I remove the fill, stroke or opacity from the arc or the object literal from the cache call then the full circle is displayed. http://jsfiddle.net/leydar/gm2FT/5/ Any insights gratefully received.

function createArc(n){
    var arc = new Kinetic.Arc({
        innerRadius: 30,
        outerRadius: 50,
        /* if I remove the fill, stroke or opacity 
           the full wheel is correctly displayed */
        fill: 'blue',
        stroke: 'black',
        opacity: 0.3,
        strokeWidth: 1,
        angle: 36,
        rotation: 36*n
    });

    return arc;
}

function init() {
var arc;

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 104,
        height: 104
    });

    var layer = new Kinetic.Layer();
    var circle = new Kinetic.Group();

    for(var i=0;i<10;i++) {
        arc = createArc(i);
        circle.add(arc);
    };

    layer.add(circle);
    stage.add(layer);

    /* if I do not cache or do not call layer.draw()
       then again the wheel is correctly displayed */
    circle.cache({
        x: -52,
        y: -52,
        width: 104,
        height: 104,
        drawBorder: true
    });
    layer.draw();
}

init();

Stephen

推荐答案

这是KineticJS的一个错误。
您可以使用此解决方法：

This is a bug of KineticJS. You may use this workaround:

Kinetic.Arc.prototype._useBufferCanvas = function() {
    return false;
};

http://jsfiddle.net/gm2FT/6/

这篇关于kineticjs组缓存和图层绘制隐藏了动态弧形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！