Binding DOM elements to Kineticjs drag and drop shapes - html

Question

I've been playing with the Kineticjs library. I have successfully added the canvas, created a shape and made it drag-and-drop.
I'd like to have html content from the page bound to or wrapped in the shape to be able to make it draggable in the same way, but still retain the interactive functionality in the html/css/jquery (so not caching the html as a bitmap, I thought about that).
I can't see how to do that, perhaps using the id selectors somehow?
Am I approaching it wrong and perhaps there's a simpler method to achieve the same result?
Appreciate any tips, advice or solutions.

Answer 1

OK so after a bit more playing, I gave up looking for ways to use the DOM, and instead, used the built-in text and image objects in kineticjs to recreate the stuff I first created with html/css. It's a bit long winded, would be interested to see if there's a shorter way.
// Create the Stage
var stage = new Kinetic.Stage({
container: 'container-kinetic',
width: 1024,
height: 768
});
// Start Steve
// Create the layer
var layer = new Kinetic.Layer();
// var rectX = stage.getWidth() / 2 - 50;
// var rectY = stage.getHeight() / 2 - 25;
// create the group
var group = new Kinetic.Group({
x: -365,
y: -275,
draggable: true
});
// circle border for object
var circ = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 43,
fill: '#fff',
stroke: '#cccccc',
strokeWidth: 1,
});
// this isn't doing anything - remove in cleanup
var steve = new Kinetic.Image({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
image: steve,
width: 81,
height: 81,
});
// add the object title
var titleText = new Kinetic.Text({
x: stage.getWidth() / 2 - 70,
y: stage.getHeight() / 2 + 55,
text: 'Steve Schofield - Founder',
fontSize: 10,
fontFamily: 'Maven Pro',
textFill: '#252525'
});
// add the object image
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: stage.getWidth() / 2 - 41,
y: stage.getHeight() / 2 - 41,
image: imageObj,
width: 81,
height: 81
});
// add the shape to the layer
group.add(yoda);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'img/team_1_p3.png';
// add the facebook icon
var imageObjfb = new Image();
imageObjfb.onload = function() {
var fbIcon = new Kinetic.Image({
x: stage.getWidth() / 2 - 26,
y: stage.getHeight() / 2 + 82,
image: imageObjfb,
width: 8,
height: 12
});
// add the shape to the layer
group.add(fbIcon);
// add the layer to the stage
stage.add(layer);
};
imageObjfb.src = 'img/facebook_icon_small.png';
// add the twitter icon
var imageObjtwitter = new Image();
imageObjtwitter.onload = function() {
var twitterIcon = new Kinetic.Image({
x: stage.getWidth() / 2 - 12,
y: stage.getHeight() / 2 + 84,
image: imageObjtwitter,
width: 12,
height: 10
});
// add the shape to the layer
group.add(twitterIcon);
// add the layer to the stage
stage.add(layer);
};
imageObjtwitter.src = 'img/twitter_icon_small.png';
// add the linkedin icon
var imageObjli = new Image();
imageObjli.onload = function() {
var liIcon = new Kinetic.Image({
x: stage.getWidth() / 2 - -4,
y: stage.getHeight() / 2 + 82,
image: imageObjli,
width: 11,
height: 12
});
// add the shape to the layer
group.add(liIcon);
// add the layer to the stage
stage.add(layer);
};
imageObjli.src = 'img/linkedin_icon_small.png';
// add the rss icon
var imageObjrss = new Image();
imageObjrss.onload = function() {
var rssIcon = new Kinetic.Image({
x: stage.getWidth() / 2 + 20,
y: stage.getHeight() / 2 + 83,
image: imageObjrss,
width: 12,
height: 11
});
// add the shape to the layer
group.add(rssIcon);
// add the layer to the stage
stage.add(layer);
};
imageObjrss.src = 'img/rss_icon_small.png';
// add cursor styling
group.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
group.on('mouseout', function() {
document.body.style.cursor = 'default';
});
// add the shape to the layer
group.add(circ);
group.add(steve);
group.add(titleText);
layer.add(group);
// add the layer to the stage
stage.add(layer);
steve.src = 'http://braindu.studiophp.net/investors.braindu/img/team_1_p3.png'; // end Steve