如何使用kineticjs按钮来绘制形状？

我开始使用canvas和kineticjs。我试图在单击“添加文本”按钮时绘制矩形，在函数中声明var Text，在图层中添加var Text，然后将该图层添加到舞台上，任何人都可以帮助我吗？如何使用kineticjs按钮来绘制形状？

window.onload = function() { 
    var stage = new Kinetic.Stage({ 
     container: "container", 
     width: 578, 
     height: 200 
    }); 
    var shapesLayer = new Kinetic.Layer(); 

document.getElementById("Draw_text").addEventListener("click", function() { 
    var Text = new Kinetic.Text({ 
     x: 100, 
     y: 100, 
     text: "hi", 
     draggable: "true" 
    }); 

    shapesLayer.add(Text); 
    stage.add(shapesLayer); 
}, false); 

<body onmousedown="return false;"> 
<div id="container"></div> 
    <div id="buttons"> 
     <button id="Draw_text"> 
     add text 
    </button> 
</div>

来源

2012-07-25 edgar garcia

-1

你必须改变你的策略。为了做到这一点，你可以使用一个非常简单的技巧。首先绘制您需要的任何形状，然后使用hide（）和show（）函数。通过使用这种方法，你可以得到你正在寻找的东西。 *不要在onclick函数中声明你的文本。

window.onload = function() { 
    var stage = new Kinetic.Stage({ 
     container: "container", 
     width: 578, 
     height: 200 
    }); 

    var shapesLayer = new Kinetic.Layer(); 
    var Text = new Kinetic.Text({ 
     x: 100, 
     y: 100, 
     text: "hi", 
     draggable: "true" 
    }); 

    document.getElementById("Draw_text").addEventListener("click", function() { 
    Text.show(); 
    shapesLayer.draw(); 
    }, false); 

    document.getElementById("Delete_text").addEventListener("click", function() { 
    Text.hide(); 
    shapesLayer.draw(); 
    }, false); 

    shapesLayer.add(Text); 
    stage.add(shapesLayer); 
    };

来源

2012-08-01 16:53:32

如何使用kineticjs按钮来绘制形状？

回答

相关问题