Lorsque vous avez fait ce qui suit, il obtient l'élément div qui héberge kineticjs ... il n'obtient pas de canevas.
canvas = document.getElementById('container');
Voilà pourquoi votre appel à getContext échoue.
[Edité pour inclure un exemple de grossissement en utilisant la forme personnalisée de Kinetic]
Nous pouvons utiliser l'objet Shape cinétique qui est conçu pour nous permettre de faire le dessin personnalisé.
Nous pouvons faire n'importe quoi dans la fonction drawFunc car nous avons accès au contexte de toile.
drawfunc sera appelée à chaque fois que la forme personnalisée doit être redessinée.
Voici l'objet de forme cinétique personnalisé sous forme de contours:
zoomer = new Kinetic.Shape({
// The drawFunc lets us do custom drawings because are given the canvas
drawFunc: function(canvas) {
// We can use the canvas context
var ctx = canvas.getContext();
ctx.beginPath();
// now we make any custom drawings
// *** put custom drawing code here ***
// but we must finish with this Kinetic-specific fillStroke(this)
// to render the drawing (not optional!)
canvas.fillStroke(this);
}
});
Voici maintenant quelques détails de Zoomer.
d'abord, utiliser une toile html temporaire pour créer une copie de l'image à résolution ½:
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=image.width/2;
canvas.height=image.height/2;
ctx.drawImage(image,
0,0,image.width,image.height,
0,0,image.width/2,image.height/2);
Dans la fonction drawFunc de la forme, de tracer un rectangle contenant l'image en demi-résolution.
Notez que drawFunc doit conclure avec canvas.fillStroke(this)
canvas.fillStroke(this) est une commande spécifique KineticJS qui rend les dessins et il est nécessaire.
zoomer = new Kinetic.Shape({
drawFunc: function(canvas) {
var ctx = canvas.getContext();
ctx.beginPath();
ctx.rect(0,0, image.width/2, image.height/2);
ctx.drawImage(halfCanvas,0,0);
canvas.fillStroke(this);
},
});
Si la souris est vers le bas, attirent également le spectateur zoom avec une partie recadrée de l'image en taille réelle.
if(this.MouseIsDown){
ctx.rect(mouseX,mouseY,viewerSize,viewerSize);
ctx.drawImage(image,
mouseX, mouseY, viewerSize, viewerSize,
this.mouseX,this.mouseY, viewerSize, viewerSize);
}
C'est tout ... Regardez le code ci-dessous pour quelques-uns des points et du style.
Voici un Fiddle qui doit être vue dans Chrome ou Mozilla (IE = exception CORS): http://jsfiddle.net/m1erickson/dMr8g/
Voici un exemple de code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.3.min.js"></script>
<style>
body{ background-color: ivory; padding:30px; }
#container{ width:200px; height:200px; border:1px solid red;}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
// create an image to zoom
var zoomImage=new Image();
var halfCanvas=document.createElement("canvas");
var halfCtx=halfCanvas.getContext("2d");
var width;
var height;
var halfWidth;
var halfHeight;
var zoomer;
var zSize=60;
var zOffset=zSize/2;
zoomImage.onload=function(){
width=zoomImage.width;
height=zoomImage.height;
halfWidth=width/2;
halfHeight=height/2;
halfCanvas.width=halfWidth;
halfCanvas.height=halfHeight;
halfCtx.drawImage(zoomImage,
0,0,width,height,
0,0,halfWidth,halfHeight);
addZoomer();
}
zoomImage.src="yourImage.png";
function addZoomer(image){
zoomer = new Kinetic.Shape({
drawFunc: function(canvas) {
var ctx = canvas.getContext();
ctx.beginPath();
ctx.rect(zOffset,zOffset,halfWidth,halfHeight);
ctx.drawImage(halfCanvas,zOffset,zOffset);
if(this.MouseIsDown){
var ix=this.mouseX*2-zOffset;
var iy=this.mouseY*2-zOffset;
// adjust if zoom is off the image
if(ix<0){ ix=0; };
if(ix>width){ ix=width-zSize; };
if(iy<0){ iy=0; };
if(iy>height){ iy=height-zSize; };
ctx.rect(this.mouseX,this.mouseY,zSize,zSize);
ctx.drawImage(zoomImage,
ix,iy,zSize,zSize,
this.mouseX,this.mouseY,zSize,zSize);
}
canvas.fillStroke(this);
},
x:0,
y:0,
width:halfWidth,
height:halfHeight,
id: "zoomer",
stroke:"blue",
strokeWidth:2
});
zoomer.zoomImage=
zoomer.MouseIsDown=false;
zoomer.mouseX=0;
zoomer.mouseY=0;
zoomer.on('mousedown', function(e) {
var mouseXY=stage.getMousePosition();
this.mouseX=mouseXY.x-zOffset;
this.mouseY=mouseXY.y-zOffset;
this.MouseIsDown=true;
layer.draw();
});
zoomer.on('mouseup', function(e) {
this.MouseIsDown=false;
layer.draw();
});
layer.add(zoomer);
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Merci Mark, je regardais les exemples; ne peut toujours pas comprendre comment ajouter la toile selon mon script sur et nous getContex. – hncl
Voir ma réponse éditée pour un exemple de la façon de le faire. – markE
Merci beaucoup Mark d'avoir pris le temps de faire l'exemple, excellent wok. – hncl