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]}