Question

我正在做一个小项目。在那个我需要调整元素，如我画的椭圆。我知道我们可以通过追踪像Example这样的mousemove属性来调整椭圆的大小。

 function mouseMove(e) {}

但我很想知道当我们使用 transfrom 和 scale 属性调整大小时它是如何工作的元素。我在w3.org中阅读了一些文档作品link我无法理解如何应用scale属性，这涉及一些矩阵变换。

请通过示例跟踪鼠标移动来解释如何使用缩放和变换属性来调整元素大小？

Answer 1

这是一个基本示例，显示椭圆根据鼠标与椭圆~~的当前距离改变大小，而不进入矩阵：https://jsfiddle.net/aaqs1wf0/~~ ：https://jsfiddle.net/aaqs1wf0/1/

SVG

<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 200 200" width="200px" height="200px">
  <ellipse cx="100" cy="100" rx="20" ry="10"/>     
</svg>

~~Javascript~~ （这包含不必要的中心调整，请参阅下面的更新）

var ellipse = document.getElementsByTagName("ellipse")[0];
var centerX = ellipse.getAttribute("cx");
var centerY = ellipse.getAttribute("cy");

window.addEventListener("mousemove", function(event) {
  var x = event.clientX - centerX; // absolute distance from center
  if (x<0) x = x * -1;
  var y = event.clientY - centerY;
  if (y<0) y = y * -1;
  var scaleX = x/centerX; // proportional distance from center
  var scaleY = y/centerY;
  ellipse.setAttribute("cx", centerX/scaleX); // adjust the centers when adjusting scale so that it stays in one place.
  ellipse.setAttribute("cy", centerY/scaleY);
  ellipse.setAttribute("style","transform: scale(" + scaleX + ", " + scaleY + ")"); // scale the ellipse
});

更新了JS （使用transform-origin设置中心，matrix()按要求设置，但我认为scale()仍然有用

var ellipse = document.getElementsByTagName("ellipse")[0];
var centerX = ellipse.getAttribute("cx");
var centerY = ellipse.getAttribute("cy");

window.addEventListener("mousemove", function(event) {
  var x = event.clientX - centerX; // absolute distance from center
  if (x<0) x = x * -1;
  var y = event.clientY - centerY;
  if (y<0) y = y * -1;
  var scaleX = x/centerX; // proportional distance from center
  var scaleY = y/centerY;
  ellipse.setAttribute("style","transform: matrix(" + scaleX + ",0,0, " + scaleY + ",0,0); transform-origin: 100px 100px;"); // scale the ellipse
});

基本上，它采用鼠标的坐标，将其与椭圆中心的坐标进行比较，然后将其缩放为比例差。请注意，内置function mouseMove()（如链接中），而不是mousemove事件。

使用scale属性调整svg元素的大小

1 个答案: