【问题标题】:SVG image scale from center with slider带有滑块的 SVG 图像从中心缩放
【发布时间】:2023-03-07 13:35:01
【问题描述】:

我制作了一个 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
          });
      }
  });

【问题讨论】:

    标签: javascript jquery svg snap.svg


    【解决方案1】:

    对于 SVG,转换的默认起始位置是左上角。因此,为了覆盖它,您需要像这样在 SVG 上显式设置一个变换原点:

    svg {
        transform-origin: center center;
    }
    

    【讨论】:

    • 我认为它只适用于 html 标签中的普通图像。它不适用于掩码中较少的 svg 图像。
    • 啊。我知道了。您正在缩放图像,而不是 SVG。抱歉,是我的错。我似乎读错了这个问题。 :)
    【解决方案2】:

    您还需要在调整width 时移动图像的xyheight

    我还更改了滑块以返回百分比。我认为这种方式会更明显一些。

    $(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

    【讨论】:

    • 完美!!这正是我想要的。谢啦兄弟。我修改了你的代码,让调整大小的行为更有意义。 jsfiddle.net/david7418/o497akje/5 请允许我再问一个关于此的问题。我刚刚添加了拖动事件以允许通过鼠标移动图像。是否可以限制移动范围以保持图像显示完整的星形掩码?
    • 好吧,我已经完成了所有的事情,包括调整大小、旋转和拖动(除了拖动范围限制)。这是演示,以防有人需要。 jsfiddle.net/david7418/o497akje/6
    • 但是,有一个小问题。如果我在移动后旋转图像,图像总是回到蒙版的中心。我认为矩阵计算有问题。有什么想法吗?
    • 我不确定你的意思。对我来说似乎很糟糕(检查了 Chrome 和 FF)
    • 请将图片拖到任意位置,然后旋转。图像将回到原来的位置(面具的中心)。它应该在您放置的位置旋转。
    猜你喜欢
    • 2014-02-24
    • 2014-05-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-16
    • 1970-01-01
    • 2011-09-18
    相关资源
    最近更新 更多