Рисовать Несколько фигур в сцене с помощью Kineticjs?

Я хочу нарисовать несколько фигур на холсте на разных нажатиях кнопок.Рисовать Несколько фигур в сцене с помощью Kineticjs?

HTML

<body> 

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

<div id="option"> 
<button value="rect" onclick="rect();">rect</button> 
<button value="circle" onclick="circle();">circle</button> 
</div> 
</body>

Javascript:

var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 500, 
     height: 500 
     }); 
var layer = new Kinetic.Layer(); 

function rect(){ 
var redLine = new Kinetic.Line({ 
     points: [100, 5, 100, 300, 450,300], 
     stroke: 'black', 
     strokeWidth: 3, 
     lineCap: 'square', 
     lineJoin: 'mitter' 
     }); 
// add the shape to the layer 

layer.add(redLine); 
// add the layer to the stage 
stage.add(layer); 
} 

function circle(){ 
     var wedge = new Kinetic.Wedge({ 
     x: stage.getWidth()/2, 
     y: stage.getHeight()/2, 
     radius: 70, 
     angleDeg: 60, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4, 
     rotationDeg: -120 
     }); 

     // add the shape to the layer 
     layer.add(wedge); 

     // add the layer to the stage 
     stage.add(layer); 
}

Но это дает ошибку, как слой и стадии не определены. Как это решить?

источник

2013-04-11 akshaykumar6

вы можете поместить свой код в jsFiddle? – SoluableNonagon

Причины, по которым этап и уровень не будут определены, заключаются в том, что они либо находятся за пределами области видимости, либо ваш код ломается, прежде чем они будут созданы в первую очередь.

Во-первых, убедитесь, что ваша сценическая площадка и слой находятся вне любых функций; глобальный охват.

Во-вторых, ваши функции 'circle()' и 'rect()' вызываются нажатием кнопки, что, как я подозреваю, нарушает ваш код. Вы хотите удалить этот обработчик OnClick из инлайн:

<button value="circle" onclick="circle();">circle</button>

и назначить OnClick с помощью JavaScript, после того, как вы создали свой этап. Вы можете легко назначить обработчики, используя jQuery. Так что ваш код должен выглядеть примерно так:

HTML

<button value="rect" id='rect'>rect</button> //assign an id to your button

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 500, 
    height: 500 
    }); 
var layer = new Kinetic.Layer(); 

$('#yourButtonId').click(function(){ // button id here would be '#rect' if you use the id above 
    rect(); 
});

источник

2013-04-15 13:55:16 SoluableNonagon

Рисовать Несколько фигур в сцене с помощью Kineticjs?

ответ

Смежные вопросы