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 回答