I am trying to use jquery image lens on Kinetic JS canvas http://jsfiddle.net/user373721/7f8qM/15/. The challenge I have is how to find the id of the image in the canvas, I tried:
myImage.onload = function () {
var yoda = new Kinetic.Image({
x: 0,
y: 0,
image: myImage,
width: 400,
height: 400,
id: 'thumb'
});
layer.add(yoda);
layer.draw();
};
myImage.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
$('#thumb').imageLens({ lensSize: 200 });
Had no luck, I would appreciate your suggestions, thanks in advance.
It is not posible to use kineticjs and imageLens as you are trying. Very different techniques.
So you have such ways:
- Don't use kineticjs. Work only with DOM images.
- Convert kineticjs objects to image http://www.html5canvastutorials.com/kineticjs/html5-canvas-shape-caching-with-kineticjs/ then insert the image to DOM and then use imageLens.
kinetic js objects are not inserted in the DOM. The correct way to access an object using the id is via the stage object.
var th = stage.get('#thumb');
来源:https://stackoverflow.com/questions/16973171/jquery-image-lens-kinetic-js-image-id