Question

我制作了一个Jquery ui滑块来动态控制蒙版中SVG图像的大小。图像从左上角调整大小。我想知道可以从中心调整图像大小吗？任何想法都将不胜感激。

https://jsfiddle.net/david7418/o497akje/

  obj = Snap(".cat");
  obj.drag();
  var dimens = obj.node.getBoundingClientRect();
  $("#slider").slider({
      max: dimens.width,
      min: dimens.width / 5,
      step: 1,
      value: dimens.width,
      slide: function(event, ui) {
          obj.attr({
              width: ui.value
          });
      }
  });

Answer 1

在调整x时，您还需要移动图片y以及height和width。

我还更改了滑块以返回百分比。我认为这样做会更加明显。

$(function() {
   obj = Snap(".cat");
   var dimens = obj.node.getBoundingClientRect();     
   console.log(dimens.width)
   $( "#slider" ).slider({
      max: 100, 
      min: 100/5, 
      step:1, 
      value:dimens.width,
      slide: function( event, ui ) {
         w = ui.value * dimens.width / 100;
         h = ui.value * dimens.height / 100;
         obj.attr({
            width: w,
            height: h,
            x: (dimens.width - w)/2,
            y: (dimens.height - h)/2
         });
      }
   });
});

Updated fiddle

Answer 2

使用SVG，变换开始的默认位置是左上角。因此，为了覆盖它，您需要在SVG上显式设置transform-origin，如下所示：

svg {
    transform-origin: center center;
}

SVG图像从中心带滑块缩放

2 个答案: