KineticJS无法用图像填充多边形

Question

将KineticJS从v4.0.5更新为v4.3.1后，我无法再使用此方法用图像填充多边形：

polygon.setFill({
    image: imageObj
});

我以黑色背景结束。还有另一种解决方法吗？

尝试：我尝试了poly.setFillPattern(image)

jsfiddle： http://jsfiddle.net/eeSSN/

Answer 1

• 删除Kinetic.Polygon中的“填充”配置。
• 您创建了thingImage但从未使用它。
• 您可以使用“setFillPatternImage”
• 您必须在iamge.onload
中调用stage.draw

代码：

var stage = new Kinetic.Stage({
   container: 'canvas',
   width: 600,
   height: 600
});
var layer = new Kinetic.Layer();
// Outline
var poly = new Kinetic.Polygon({
    points: [0, 0, 400, 0, 400, 400, 0, 400],
    //fill: 'red',
    stroke: '#000',
    strokeWidth: 0,
    name: 'poly',
    draggable: false
});
var imageObj = new Image();
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
    poly.setFillPatternImage(imageObj);
    stage.draw();
}

layer.add(poly);
stage.add(layer);

http://jsfiddle.net/lavrton/eeSSN/1/