Kinetic JS图像放大镜

我试图遵循这个例子http://www.script-tutorials.com/html5-canvas-image-zoomer/

我收到以下错误：

Object doesn't support property or method 'getContext' 

这是我的脚本：

  stage = new Kinetic.Stage({ container: 'container', width: 512, height: 512 }); var layer = new Kinetic.Layer(); var imageObj = new Image(); imageObj.onload = function() { var yoda = new Kinetic.Image({ x: 0, y: 0, image: imageObj, width: 512, height: 512 }); layer.add(yoda); stage.add(layer); }; imageObj.src = "../../Content/images/notfound.png"; canvas = document.getElementById('container'); ctx = canvas.getContext('2d'); 

非常感谢您的建议，或者是Kinetic图像放大镜的示例。 提前致谢

Answer 1

当你执行以下操作时，它会获得托管kineticjs的div元素…它没有得到canvas。

 canvas = document.getElementById('container'); 

这就是你对getContext的调用失败的原因。

[编辑包含使用Kinetic自定义形状的放大示例]

我们可以使用Kinetic Shape对象，它允许我们进行自定义绘图。

我们可以在drawFunc函数中自定义绘制任何东西，因为我们可以访问canvas上下文。

每次需要重绘自定义Shape时都会调用drawfunc 。

以下是轮廓forms的Kinetic自定义Shape对象：

 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); } }); 

现在为一些zoomer细节。

首先，使用临时htmlcanvas以½分辨率创建图像的副本：

 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); 

在Shape的drawFunc函数中，绘制一个包含半分辨率图像的矩形。

请注意， drawFunc必须以canvas.fillStroke(this)结束

canvas.fillStroke(this)是一个特定于KineticJS的命令，用于渲染图形并且是必需的。

 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); }, }); 

如果鼠标已关闭，还可以使用全尺寸图像的裁剪部分绘制缩放查看器。

 if(this.MouseIsDown){ ctx.rect(mouseX,mouseY,viewerSize,viewerSize); ctx.drawImage(image, mouseX, mouseY, viewerSize, viewerSize, this.mouseX,this.mouseY, viewerSize, viewerSize); } 

就是这样……请参阅下面的代码，了解一些细节和样式。

这是一个必须在Chrome或Mozilla中查看的小提琴（IE = CORS例外）： http ： //jsfiddle.net/m1erickson/dMr8g/

这是示例代码：