Невозможно использовать Kineticjs в html5

Я хочу использовать библиотеку Kinetic js, чтобы применить эффект перетаскивания и изменения размера моих изображений на холсте. Итак, я следую этому примеру http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

Мой html, скажем так:

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

Затем при загрузке делаю:

$(document).ready(function() {  
    loadImage()
});

function loadImage(){

imageObj = new Image();      
imageObj.onload  = function(){
    var stage = new Kinetic.Stage("container", 578, 200);
    var layer = new Kinetic.Layer();   

    var x = stage.width / 2 - 200 / 2;
    var y = stage.height / 2 - 137 / 2;

    var image = new Kinetic.Image({
        image: imageObj,
        x: x,
        y: y
    });

    image.draggable(true);

    // add cursor styling
    image.on("mouseover", function(){
        document.body.style.cursor = "pointer";
    });
    image.on("mouseout", function(){
        document.body.style.cursor = "default";
    });
    layer.add(image);
    stage.add(layer);
};
imageObj.src = 'myImage.png';
}

Но я получаю следующее сообщение:

«Uncaught TypeError: невозможно вызвать метод appendChild из undefined», ссылаясь, я думаю, на контейнер div. В чем может быть проблема?

заранее спасибо


canvas html draggable kineticjs
person novellino    schedule 31.08.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вызов конструктора неправильный.

Пытаться

var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 363
});

Что касается части перетаскивания, вы можете сделать свой слой перетаскиваемым с помощью

var layer = new Kinetic.Layer({draggable: true});

Вы можете увидеть базовый пример этой работы в этой скрипке.

person jbalsas    schedule 03.09.2012
comment
Спасибо. Я сделаю это. Но есть ли способ получить холст, который у меня уже есть в html, вместо использования объекта stage? поэтому вместо того, чтобы делать canvas = document.getElementById (myCanvas); ctx = canvas.getContext (2d); есть ли способ использовать ту же логику, но с использованием сцены? - person novellino; 03.09.2012
comment
Для этого вы можете использовать кинетическую форму. - person jbalsas; 03.09.2012
comment
Хорошо, я использовал canvas = layer.getCanvas (); ctx = layer.getContext (); и получил то, что мне было нужно. Спасибо - person novellino; 03.09.2012

arrow_upward
0
arrow_downward

Попробуйте setDraggable:

image.setDraggable(true);

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

person maiconio    schedule 31.08.2012
comment
Хорошо, я попробовал с конструктором холста. Я добавляю ‹div id = container› ‹/div› в свой html и отредактировал свой вопрос, чтобы также создать холст. Я получаю Uncaught TypeError: невозможно вызвать метод appendChild из undefined. Любые идеи? - person novellino; 03.09.2012