动力学JS图片放大镜

我想以此为榜样http://www.script-tutorials.com/html5-canvas-image-zoomer/动力学JS图片放大镜

我收到以下错误：

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

会感激你的建议或者是有一个动力学图像放大镜的例子。在此先感谢

来源

2013-06-02 hncl

当您执行以下操作时，它会获取托管kineticjs的div元素...它不会获取画布。

canvas = document.getElementById('container');

这就是您拨打getContext失败的原因。

[编辑用动力学的自定形状，包括放大的例子]

我们可以使用它的目的是让我们做自定义绘制的动力学形状对象。

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

drawfunc将在每次需要重绘自定义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); 
    } 
});

现在对于一些伸缩镜头细节。

首先，使用临时HTML画布在1/2分辨率创建图像的副本：

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

在外形的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/

下面是示例代码：

<!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>

来源

2013-06-03 03:07:03 markE

谢谢马克，我看着示例;仍然无法弄清楚如何根据我的脚本和我们的getContex添加画布。 – hncl

查看我编辑的答案，了解如何操作的示例。 – markE

非常感谢Mark马上花时间做这个例子，出色的炒锅。 – hncl

动力学JS图片放大镜

回答

相关问题