0

キャンバスに画像を追加してKinetic.jsライブラリを使用しようとしていますが、コンソールにエラーがあります

Uncaught TypeError: Type error

私のコードは：

JSフィドル

HTML

<!DOCTYPE HTML>

設計

#wrapper{
width:300px;
height:200px;
margin:auto;
border-radius: 15px;
border: 4px solid black;
}

#container{
height:120px;
width:100%;
border:1px solid red;
}
#items, #cliparts{
height:55px;
border:1px solid green;
width:100%;
}

#items img, #cliparts img {
max-height:50px;
max-width:40px;
padding: 0 5px;
border:2px double white;
}
#items img:hover,  #cliparts img:hover{
border:2px double blue;
cursor:pointer;
}

JavaScript 

document.getElementById('clip1').addEventListener('click', function() {
                 var stage = new Kinetic.Stage({
                  container: "container",
                  width: 300,
                  height: 100
                });

                 var layer = new Kinetic.Layer();


             var clip_group = new Kinetic.Group({
                  x: 200,
                  y: 30,
                  draggable: true,
               });

            var image_src = 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';

            var clip_image = new Kinetic.Image({
                  x: 0,
                  y: 0,
                  image: image_src,
                  width: 150,
                  height: 138,
                  name: "image",
                });




            clip_group.add(clip_image);
            layer.add(clip_group);
            stage.add(layer);
            stage.draw();               
         });

</ p>

4

1 に答える 1

3

Kinetic.Imageのimageプロパティは、URL文字列ではなく、画像オブジェクトである必要があります。次に例を示します。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

于 2012-12-18T03:52:22.550 に答える