我可以结合KineticJS和jQuery吗？

你好stackoverflowers，我可以结合KineticJS和jQuery吗？

我有我的网页上的各种尺寸（男人小，中等等）和kineticJs容器上的文本元素的jquery引导下拉。我试图获得$（'＃chosenSize'）。text（）;在kineticJs容器中显示，但它不起作用。有人能解释我为什么吗？

这是我的HTML的一小部分：

<div id="dropdown-1" class="dropdown dropdown-tip"> 
     <ul class="dropdown-menu"> 
      <li><a class="dropOption" href="#msm">Mens small</a></li> 
      <li><a class="dropOption" href="#mmed">Mens medium</a></li> 
      <li><a class="dropOption" href="#mlarge">Mens large</a></li> 
      <li><a class="dropOption" href="#mxl">Mens XL</a></li> 
      <li class="dropdown-divider"></li> 
      <li><a class="dropOption" href="#wsm">Womens small</a></li> 
      <li><a class="dropOption" href="#wmed">Womens medium</a></li> 
      <li><a class="dropOption" href="#wlarge">Womens large</a></li> 
      <li><a class="dropOption" href="#wxl">Womens XL</a></li> 
     </ul> 
    </div> 
    <a href="#" id="trigger" data-dropdown="#dropdown-1">Choose your size</a> 
    <p id="sizeContainer">Your chosen size is: <span id="chosenSize"></span></p> 

    <div id="container"></div> <!-- KineticJs canvas -->

而且，由于没有必要向你展示所有的代码，我会告诉你只有在我想要kineticJs和jQuery结合文本元素：

 var sizeText = new Kinetic.Text({ 
     x:40, 
     y:20, 
     text:'Size: ' + $('#chosenSize').text(), 
     fontSize:16, 
     fontFamily:'Arial', 
     fill:'black' 
    });

我试图用普通的JavaScript像这样

document.getElementById('chosenSize').innerHTML;

，但它也没有工作。我错在哪里？

谢谢！

编辑：

的问题是，我并没有刷新变化的文字和画布元素。所以，这个问题的答案是：

 $('.dropOption').on('click', function() { 
     sizeText.setText('Size: ' + $(this).text()); 
     layer.draw(); 
    })

你必须把它放在drawImage方法（这是主要的KineticJs功能）结束。

来源

2013-08-04 Alex

鉴于在从下拉菜单中选择时会发生什么错误代码，可能的假设是在选择大小后没有更新Kinetic.Text对象。您需要刷新Kinetic.Text对象上设置的文本以及刷新画布。

因此总之，请在下拉菜单上附加一个onSelect事件。使用此调用sizeText.setText('Size: ' + $('#chosenSize').text())，最后，canvasLayer.draw()

来源

2013-08-04 22:53:21 Ani

谢谢！问题是我没有刷新文本和画布。注意：您必须在_drawImage（）_函数的末尾添加该事件。 – Alex

我可以结合KineticJS和jQuery吗？

回答

相关问题