Question

是否可以在镜像工具中查看动态图像，如http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html

我正在使用以下kineticjs文件kinetic-v5.0.1.js和kinetic-v5.0.1.min.js

先谢谢。

Answer 1

我一会儿就开始了这个动态变焦效果。它有效但需要一些调整。

演示：http://jsfiddle.net/m1erickson/pXnNg/

我们的想法是使用自定义的Kinetic.Shape来绘制原始图像和可选的放大叠加。

我更新了它以使用Kinetic版本5，欢迎您将其用作镜头工具的起点。

祝你的项目好运！

<!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-v5.0.1.min.js"></script>
<style>
    body{ background-color: ivory; }
    #container{ width:300px; height:300px; border:1px solid red;}
</style>
<script>
$(function(){

    var stage = new Kinetic.Stage({
      container: 'container',
      width: 300,
      height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // create an image to zoom
    var zoomImage=new Image();
    zoomImage.onload=function(){
        draw();
    }
    zoomImage.src="houseIcon.png";

    var zoomer;
    var zSize=60;
    var zOffset=zSize/2;

    function draw(){
        zoomer = new Kinetic.Shape({
            drawFunc: function(context) {
                var ctx = context._context;

                ctx.save();

                ctx.beginPath();

                ctx.rect(stage.width()/2-zoomImage.width/4,
                          stage.height()/2-zoomImage.width/4,
                          zoomImage.width/2,zoomImage.height/2);

                ctx.drawImage(zoomImage,0,0,zoomImage.width,zoomImage.height,
                    stage.width()/2-zoomImage.width/4,
                    stage.height()/2-zoomImage.height/4,
                    zoomImage.width/2,zoomImage.height/2);

                if(this.MouseIsDown){
                    var ix=this.imageX-zOffset;
                    var iy=this.imageY-zOffset;
                    // adjust if zoom is off the image
                    if(ix<0){ ix=0; };
                    if(ix>zoomImage.width){ ix=zoomImage.width-zSize; };
                    if(iy<0){ iy=0; };
                    if(iy>zoomImage.height){ iy=zoomImage.height-zSize; };

                    ctx.strokeStyle="black";
                    ctx.lineWidth=2;
                    ctx.strokeRect(this.mouseX-zOffset,this.mouseY-zSize/2,zSize,zSize);

                    ctx.drawImage(zoomImage,
                        ix,iy,zSize,zSize,
                        this.mouseX-zOffset,this.mouseY-zOffset,zSize,zSize);
                }

                ctx.restore();

                context.fillShape(this);
            },
            id: "zoomer",
            stroke:"blue",
            strokeWidth:2,
            width:zoomImage.width/2,
            height:zoomImage.height/2
        });
        zoomer.MouseIsDown=false;
        zoomer.mouseX=0;
        zoomer.mouseY=0;
        zoomer.imageX=0;
        zoomer.imageY=0;
        zoomer.on('mousedown', function(e) {
            var mouseXY=stage.getPointerPosition();
            this.mouseX=mouseXY.x;
            this.mouseY=mouseXY.y;
            this.imageX=Math.round((mouseXY.x-zoomImage.width/3)*2);
            this.imageY=Math.round((mouseXY.y-zoomImage.height/3)*2);
            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>
    <h4>Hold the mouse down over the image to magnify.</h4>
    <div id="container"></div>
</body>
</html>

是否可以在动力学图像中应用镜头视图？

1 个答案: