動力學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圖片放大鏡

回答

相關問題