在<div>中的jQuery可调整大小的画布

用户名

我使用jquery的可调整大小功能(http://jqueryui.com/resizable/)来调整div的大小。在这个div中,我有一个输入和一个画布,我希望当我调整div的大小时,画布跟随其后,我该怎么做?

用这样的示例代码:

<script>
    $(function() {
        $( "#resizable" ).resizable();
    });
</script>
<div id="resizable">
     <input type="text" id=field />
     <canvas id="mycanvas" height="400px"></canvas>
</div>

谢谢您的帮助。

品牌

如果使用CSS(如jQuery),则必须确保按比例调整大小,否则画布图纸会因拉伸而变形。通过在应用.resizable()时设置AspectRatio属性来执行此操作。

另外,由于还希望调整#myCanvas的大小,因此在应用.resizable()时必须设置AlsoResize属性。

  // make #resizable resizable
  // let #resizable know to also resize #myCanvas when it resizes
  // require that the resizing be proportional so the canvas drawing is not distorted

  $("#resizable").resizable({
    alsoResize: "#myCanvas",
    aspectRation:true
  }); 

  $("#myCanvas").resizable();

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery可调整大小使我无法编辑div

在没有jquery UI的div中单击时如何使图像可调整大小

Div在angular.js中可调整大小

div中可调整大小和可拖动的图像

如何使div可调整大小

JS可调整大小的div

如何防止 jquery 可调整大小的 div 接收调整大小的单击事件

使用jQuery可调整大小的处理程序附加和调整div的大小

如何使这个可调整大小的div从边缘调整大小?

如何制作可调整大小的 div,从侧面调整大小?

我需要TH中的可调整大小(jQuery ui)div不要小于TD宽度或使TD溢出:隐藏

在使用可调整大小的 Jquery 增加 div 的大小时如何滚动?

将整个svg调整为可调整大小的div

jQuery / Javascript可拖动和可调整大小不适用于div克隆

使用JQuery,如何执行可调整大小的div以使其适合其子控件?

单击和退出相关DIV时控制jQuery可调整大小的句柄

jQuery UI:具有滚动条的可调整大小的div

jQuery可调整大小不适用于动态创建的Div

jQuery可调整大小的居中div与网格产生意外结果

如果添加许多div,jQuery可调整大小的速度非常慢

Jquery-ui 可调整大小的功能无法与 flexbox div 正常工作

带有css的div中可调整大小的对角线

如何让 CSS 溢出和高度:计算在可调整大小的 div 中工作

在其InnerHTML中附加HTML后,使Div再次可调整大小

通过拖动使d3 div可调整大小

如何从各个角度制作可调整大小的div?

可调整大小的div,不会更改“ left”属性

可调整大小的div脚本调整大小将div推到视口之外

如何获得可拖动和可调整大小的图像以及仅可调整div的图像?