如何使用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按鈕來繪製形狀？

回答

相關問題