Kineticjs组缓存和图层绘制隐藏动态弧线形状

kineticjs group cache and layer draw is hiding kinetic arc shapes

本文关键字：动态 隐藏 绘制 缓存 图层 Kineticjs      更新时间：2023-09-26

我正在创建一个圆圈作为一组动态弧。当我缓存组并随后调用图层上的draw函数时，圆圈的四分之三被隐藏。我认为是层次。draw可能需要偏移，但实际上我只是猜测。当我从圆弧中移除填充、描边或不透明度，或者从缓存调用中移除对象文字时，整个圆就会显示出来。http://jsfiddle.net/leydar/gm2FT/5/如有任何见地，不胜感激。

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();
斯蒂芬

这是KineticJS的一个bug。您可以使用以下方法:

Kinetic.Arc.prototype._useBufferCanvas = function() {
    return false;
};
http://jsfiddle.net/gm2FT/6/

相关文章：