image - 使用 html5 和 kineticjs 在六边形内显示图像

Question

我想绘制一个六边形并使用 html5 在其中显示一个图像。我已经尝试过了，但我没有得到图像。我只想为此使用kineticjs。

这是代码：

function hexagon(){
    var stage = new Kinetic.Stage({
      container: "container"
    });

    var layer = new Kinetic.Layer();

    var hexagon = new Kinetic.RegularPolygon({
      x: 100,
      y: 100,
      sides: 6,
      radius: 100,
      fill: {image: "css/images/logo.png"},

      stroke: "royalblue",
      strokeWidth: 2
    });

    // add the shape to the layer
    layer.add(hexagon);
   // add the layer to the stage
    stage.add(layer);
}

Answer 1

fill 接受一个图像对象。尝试以下操作：

var layer = new Kinetic.Layer();

logo = new Image();
logo.src = "css/images/logo.png";

var hexagon = new Kinetic.RegularPolygon({
      x: 100,
      y: 100,
      sides: 6,
      radius: 100,
      fill: {image: logo},

      stroke: "royalblue",
      strokeWidth: 2
    });

    // add the shape to the layer
    layer.add(hexagon);
   // add the layer to the stage
    stage.add(layer);
}

Answer 2

KinectJS 的作者写了一些非常棒的教程。在这幅画中，他画了一个五边形的图像，以及其他一些东西。应该足以帮助你。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/

Answer 3

我有解决办法。

迟到（迟到总比没有好）

它应该是：

fill: {image: "css/images/logo.png", offset: [0, 0]}