缩放处理 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3   <head>
  4     <meta charset="UTF-8" />
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7     <title>Document</title>
  8     <script src="./konva.min.js"></script>
  9     <style>
 10       * {
 11         margin: 0;
 12         padding: 0;
 13       }
 14       body,
 15       html {
 16         padding: 5px;
 17       }
 18       #container {
 19         background-color: pink;
 20         width: 500px;
 21         height: 500px;
 22         margin: 0 auto;
 23       }
 24     </style>
 25   </head>
 26   <body>
 27     <div id="container"></div>
 28     <script>
 29       var width = 500;
 30       var height = 500;
 31       var newScale = 1;
 32       // where everything stands in Konvas
 33       var stage = new Konva.Stage({
 34         container: "container",
 35         width: width,
 36         height: height,
 37       });
 38 
 39       var layer = new Konva.Layer();
 40 
 41       var rect1 = new Konva.Rect({
 42         width: 100,
 43         height: 100,
 44         fill: "green",
 45         stroke: "black",
 46         strokeWidth: 0,
 47         scaleX: newScale,
 48         scaleY: newScale,
 49       });
 50       layer.add(rect1);
 51       stage.add(layer);
 52       document
 53         .getElementById("container")
 54         .addEventListener("wheel", function (e) {
 55           if (e.deltaY <= 0) {
 56             fangda();
 57           } else {
 58             suoxiao();
 59           }
 60         });
 61       const fangda = () => {
 62         console.log("向上-放大");
 63         if (newScale < 1.2) {
 64           const num = newScale + 0.01;
 65           newScale = (num * 100) / 100;
 66           let calcWidth = (rect1.width() - rect1.width() * newScale).toFixed(2);
 67           let calcHeight = (rect1.width() - rect1.height() * newScale).toFixed(
 68             2
 69           );
 70 
 71           console.table(
 72             "calcWidth--" + calcWidth,
 73             "calcHeight--" + calcHeight,
 74             "缩小计算后的值--" + newScale
 75           );
 76           //   if (calcWidth || calcHeight < 0) {
 77           //     calcWidth = Math.abs(calcWidth);
 78           //     calcHeight = Math.abs(calcHeight);
 79           //   }
 80           rect1.offsetX(-calcWidth);
 81           rect1.offsetY(-calcHeight);
 82           rect1.scale({
 83             x: newScale,
 84             y: newScale,
 85           });
 86         }
 87       };
 88       const suoxiao = () => {
 89         console.log("向下-缩小");
 90         if (newScale > 0.5) {
 91           const num = newScale - 0.01;
 92           newScale = Math.floor(num * 100) / 100;
 93 
 94           let calcWidth = rect1.width() - rect1.width() * newScale;
 95           let calcHeight = rect1.height() - rect1.height() * newScale;
 96 
 97           console.table(
 98             "calcWidth--" + calcWidth,
 99             "calcHeight--" + calcHeight,
100             "缩小计算后的值--" + newScale
101           );
102 
103           rect1.offsetX(-calcWidth);
104           rect1.offsetY(-calcHeight);
105           rect1.scale({
106             x: newScale,
107             y: newScale,
108           });
109         }
110       };
111     </script>
112     <button onclick="fangda()">放大</button>
113     <button onclick="suoxiao()">缩小</button>
114   </body>
115 </html>

 

posted @ 2022-05-07 17:37  古德拉克  阅读(49)  评论(0)    收藏  举报