Question

我一直试图解决这个问题一段时间似乎无法解决，基本上我想做的是在使用kinetic js的画布上添加一个ID，这在我检查时操作代码时有效。元件。有没有人有任何想法为什么这个代码不会将ID应用到我的画布，我没有得到任何错误;

 $(function() {
$('.kineticjs-content canvas').id = 'somename';
});

非常感谢任何帮助。

梅丽莎

Answer 1

创建图层时，KineticJS实际创建了2个html画布。

一个画布用于命中测试（仅限内部使用）。

一个画布用于绘制场景（这是你想要的）。

要获取对场景画布的引用并设置其ID，您可以执行以下操作：

var htmlCanvas = myLayer.getContext()._context.canvas;

htmlCanvas.id="gotcha";

console.log(htmlCanvas);

[加法：演示]

以下是示例代码和小提琴：http://jsfiddle.net/m1erickson/LmCgw/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>

<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var myLayer = new Kinetic.Layer();
    stage.add(myLayer);

    // get the Scene (html canvas) from KineticJS myLayer

    var htmlCanvas=myLayer.getContext()._context.canvas;

    // assign an id to that html canvas

    htmlCanvas.id="gotcha";


    // get a reference to the html canvas with id of "gotcha"

    var canvas=document.getElementById("gotcha");
    var context=canvas.getContext("2d");

    // draw something on the regular html canvas (outside KineticJS)

    context.beginPath();
    context.arc(100,100,20,0,Math.PI*2);
    context.closePath();
    context.fillStyle="skyblue";
    context.strokeStyle="gray";
    context.lineWidth=3;
    context.fill();
    context.stroke();

}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

Answer 2

这不起作用的原因是因为$()返回的值是一个jQuery对象，而不是一个元素。

您可以使用数组访问表示法从jQuery对象访问各个元素，因此对于您的情况，这应该有效：

$('.kineticjs-content canvas')[0].id = 'somename';

（或者使用$(...).attr('id', 'whatever')也应该有用）

根据ID在本地下载画布

2 个答案: