我正在使用javascriptKinetic

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"></script>

我需要创建一个Kinetic.Images()数组,每个数组具有不同的图像。 这是我的代码。

var imagesRef = ["cNote.gif","dNote.gif","eNote.gif","fNote.gif","gNote.gif","aNote.gif","cNote.gif","cSharpdFlat.gif","dSharpeFlat.gif","fSharpgFlat.gif","gSharpaFlat.gif","aSharpbFlat.gif"];                                                                        
    var imageObjs=[] ;
    var imageObj;
    var images=[];
    var image;
    var imageX = 0;
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
  function drawImages(){
  for(i=0;i<11;i++){
    var imageObj = new Image();
    imageObjs[i] = imageObj;
    imageObjs[i].src= imagePath + imagesRef[i];

    alert(imageObjs[i].src);
    imageObjs[i].onload = function(){
      alert("imageOnload has been called");
    var image = new Kinetic.Image({
           x:imageX,
           y:0,
           image:imageObjs[i],
           width:75,
           height:75,
           stroke:'black',
           strokeWidth:1,
           strokeEnabled:true
        });

        alert("image has been created");
        alert(image.getImage());
    images[i] = image;
    layer.add(images[i]);
    imageX += 75;
    layer.draw();
    }

  }
   }
stage.add(layer);

</script>

 <input type="button" onclick="drawImages();"id="submit" value="submit" />

单击按钮时,它应该加载图像。 但是只加载了kinetic.image的笔划

因此,我看到的是一排矩形,里面没有图像,这应该是应该的。 imageObjs[i].src的警报在警报“已创建图像”之前每次循环遍历时imageObjs[i].src触发。 当我尝试alert(image.getImage())我不确定。

===============>>#1 票数:1

我认为可能是因为您没有定义变量imagePath

  ask by DavidAdair translate from so

未解决问题?本站智能推荐:

1回复

编辑其他Kinetic.Image时拖动Kinetic.Image

我的画布中有2个Kinetic.Image(A和B)。 我希望当我尝试移动A时,仅Kinetic.Image B会更改,而A不会更改其位置。 我的代码是: 谢谢!
1回复

KineticJS:image.destroy()不会破坏Kinetic.Image和group.destroy()导致无限循环

在过去的几天里,我面对KineticJS和我的Web应用程序一个非常奇怪的问题: 通常,我的应用程序由Kinetic.Group表示的几个“页面”组成。 除一组以外的所有组都是偏移的,这意味着不可见。 不可见的组都被临时添加到单独的Kinetic.Layer (用于缓存等),唯一可见的
1回复

未捕获的TypeError:无法调用未定义的方法“ add”(Kinetic js)

我正在尝试制作一个通过使用dynamicjs制作多个圆形对象的游戏。 这是html: 我在js中的逻辑是->我将“ enemy”(循环动力学对象)推入数组“ enemyArmada”,这是通过函数“ createEnemy()”完成的。 使用setInterval每隔3
2回复

从Kinetic JS Image获取像素数据

我正在使用Kinetic JS来显示图像,我想实现放大功能。 所以基本上我想复制鼠标指针悬停在上面的图像区域,缩放它,并将其显示在屏幕上的其他位置。 您可以使用canvas context.getImageData()函数获取HTML5画布像素数据,但是在Kinetic JS中是否有
1回复

Kinetic JS-基于旋转另一个对象和逆时针旋转的图像旋转

我尝试使用鼠标角度旋转图像:首先,我使用以下方法计算鼠标的角度: 然后我在舞台中央制作了一个圆(根据圆的位置重新计算偏移量); 当我拖动圆圈时,图像旋转,使用以下方法: 第一个问题是我无法找出基于圆旋转来旋转图像的正确因素。 第二个问题是如何逆时针旋转圆? 完整的演示位
1回复

Kinetic.js:触摸时旋转图像

我有这个小提琴: http://jsfiddle.net/WDjpx/2/ 图像旋转不正确。 我使用的代码是: layer.add(RECT); stage.add(层); 谁知道我的数学有什么问题??? ---编辑--- 新的feddle与我想要的:
1回复

Kinetic JS图像分层和动画问题

我正在尝试将我的多个图像层分别旋转并设置为动画。 问题是当我在其中一张图像上调用动画旋转功能时,调试器说图像没有旋转功能。 这是我所得到的
3回复

如何使用canvas和Kinetic.js裁剪图像

我的函数绘制一个图像,另一个图像在另一个图层上使用Kinetic.js,但我想裁剪第二个图像,名为smsTopBg_image 谢谢 !
1回复

如何使用动力学JS从另一个图像中提取图像?

我有一个图像,我需要从中提取并创建另一个动力学图像(无需修改原始图像)。 提取的图像将是一个矩形,我具有其4个点的坐标。 我检查了http://kineticjs.com/docs/Kinetic.Image.html,是否有任何功能可以做到这一点,但没有找到任何东西。 我尝试了使用裁
1回复

询问“ imagedynamic.js”

我没有找到我想要的文章 我想知道我问题的答案。 "> 我想单击左侧的按钮。 向右显示图像。 var stage = new Kinetic.Stage({ container: 'container', width: 530, height: 530 }); va