Question

我正在尝试按照此示例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 = document.getElementById('container');

这就是你对getContext的电话失败的原因。

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

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

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

每次需要重新绘制自定义Shape时，都会调用

drawfunc。

以下是轮廓形式的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细节。

首先，使用临时html画布以½分辨率创建图像副本：

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/

以下是示例代码：

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

Kinetic JS图像放大镜

1 个答案: