Javascript 基于滑块值弯曲图像

参考这篇文章：和这篇JSFIDLE：

如何使图片也能拉伸？不仅仅是一个长方体半径

我希望能够使图像的弯曲形式可控，其值为弯曲的程度

我已经知道如何更改图像的宽度和大小：

HTML

提前谢谢你

---

Stijn

将您创建的拉伸效果与边界半径相结合，可能会获得所需的效果

您可以使用jQuery的.css方法编辑图像的样式

在这种情况下，您可以在滑块的滑动事件中使用它来动态更改图像的边框，使其看起来弯曲

$(function() {
$( "#slider-range-max" ).slider({
  range: "min",
  min: 1,
  max: 10,
  value: 0,
  step: .001,
  slide: function( event, ui ) {
        $("#image").width(ui.value * 100);
        $("#image").height(200);
        $('#image').css('border-top-left-radius', '50% 15px')
        $('#image').css('border-top-right-radius', '50% 15px')
        $('#image').css('border-bottom-left-radius', '50% 15px')
        $('#image').css('border-bottom-right-radius', '50% 15px')
  }
  });
  $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});

---

下面是一个包含上述代码的示例。当然，可以更改值以自定义效果。

我猜您可能无法在客户端弯曲和成像，即使您可能可以将其加载到画布并修改画布等。

$(function() {
$( "#slider-range-max" ).slider({
  range: "min",
  min: 0,
  max: 10,
  value: 0,
  step: .001,
  slide: function( event, ui ) {
        $("#image").width(ui.value * 100);
        $("#image").height(ui.value * 50);
  }
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });

$(function() {
$( "#slider-range-max" ).slider({
  range: "min",
  min: 1,
  max: 10,
  value: 0,
  step: .001,
  slide: function( event, ui ) {
        $("#image").width(ui.value * 100);
        $("#image").height(200);
        $('#image').css('border-top-left-radius', '50% 15px')
        $('#image').css('border-top-right-radius', '50% 15px')
        $('#image').css('border-bottom-left-radius', '50% 15px')
        $('#image').css('border-bottom-right-radius', '50% 15px')
  }
  });
  $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});