logo标签列表

鼠标滚轮缩放

javascriptjqueryhtmlhtml5-canvas
5

我正在开发一个画布，你只能通过拖拽图片来控制它的左右位置，并使用鼠标滚轮来缩放图片。这是我目前的代码，请随时询问任何细节。我正在尝试找到一种紧凑且需要最少代码的方法来实现此功能。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
    <script src="kinetic-v5.1.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/javascript">
      function drawImage(imageObj) {
        var stage = new Kinetic.Stage({
          container: "container",
          width: 1800,
          height: 800
        });
        var layer = new Kinetic.Layer();

        // image
        var image1 = new Kinetic.Image({
          image: imageObj,
          x: stage.getWidth() / 2 - 896 / 1,
          y: stage.getHeight() / 2 - 255 / 2,
          width: 200,
          height: 157,
          draggable: true,
          dragBoundFunc: function (pos) {
            if (pos.x < this.minX) { }
            this.minX = pos.x;
            return {
              x: pos.x,
              y: this.getAbsolutePosition().y
            }
          }
        });


        // add cursor styling
        image1.on('mouseover', function() {
          document.body.style.cursor = 'pointer';
        });
        image1.on('mouseout', function() {
          document.body.style.cursor = 'default';
        });

        layer.add(image1);
        stage.add(layer);
      }
      var imageObj = new Image();
      imageObj.onload = function() {
        drawImage(this);
      };
      imageObj.src = 'image1.png';

    </script>
  </body>
</html>
什么是问题？ - galath
1
@galath，当选中时，如何使用鼠标滚轮使图片放大和缩小？ - user5071855
2个回答
1

一种方法是使用缩放助手。例如：

var zoomHelper = {
    stage: null,
    scale: 1,
    zoomFactor: 1.1,
    origin: {
        x: 0,
        y: 0
    },
    zoom: function(event) {
        event.preventDefault();
        var delta;
        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            if (event.originalEvent.detail > 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        } else {
            if (event.originalEvent.wheelDelta < 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        }
        var evt = event.originalEvent,
            mx = evt.clientX - zoomHelper.stage.getX(),
            my = evt.clientY - zoomHelper.stage.getY(),
            zoom = (zoomHelper.zoomFactor - delta),
            newscale = zoomHelper.scale * zoom;
        zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin
            .x - mx / newscale;
        zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin
            .y - my / newscale;
        zoomHelper.stage.setOffset({
            x: zoomHelper.origin.x,
            y: zoomHelper.origin.y
        });
        zoomHelper.stage.setScale({
            x: newscale,
            y: newscale
        });
        zoomHelper.stage.draw();
        zoomHelper.scale *= zoom;
    }
};

这是一个演示，其中包含您提供的代码示例，稍作修改。

0

尝试使用this完整的JavaScript库。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接