KineticJS 无法用图像填充多边形

【问题标题】：KineticJS not able to fill Polygon with ImageKineticJS 无法用图像填充多边形
【发布时间】：2013-01-10 18:28:41
【问题描述】：

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

polygon.setFill({
    image: imageObj
});

我最终得到黑色背景。有没有其他方法可以解决这个问题？

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

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

【问题讨论】：

标签： javascript jquery html canvas kineticjs

【解决方案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/

【讨论】：