我可以结合 KineticJS 和 jQuery 吗？答案

【问题标题】：Can I combine KineticJS and jQuery?我可以结合 KineticJS 和 jQuery 吗？
【发布时间】：2013-08-05 13:57:49
【问题描述】：

你好 stackoverflowers，

我的页面上有一个 jquery bootstrap 下拉菜单，有各种尺寸（男士小号、中号等）和带有文本元素的 kineticJs 容器。我正在尝试获取 $('#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 的主要函数）。

【问题讨论】：

标签： jquery canvas html5-canvas kineticjs

【解决方案1】：

鉴于缺少有关从下拉列表中进行选择时发生的情况的代码，一个很可能的假设是您没有在选择大小后更新 Kinetic.Text 对象。您需要刷新 Kinetic.Text 对象上设置的文本以及刷新画布。

简而言之，在下拉列表中附加一个onSelect 事件。使用它来调用sizeText.setText('Size: ' + $('#chosenSize').text())，最后调用canvasLayer.draw()

【讨论】：

谢谢！问题是我没有刷新文本和画布。注意：您必须在 drawImage() 函数的末尾添加该事件。