可调整大小的画布(JQuery UI)

前端之家收集整理的这篇文章主要介绍了可调整大小的画布(JQuery UI)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
任何DOM元素可以根据此页面进行调整大小: http://jqueryui.com/demos/resizable/

然而,似乎这对于CANVAS元素来说不起作用。可能?

解决方法

画布有两种类型的调整大小行为:

>调整内容的拉伸尺寸以适应画布的新尺寸
>调整画布增长或缩小时内容保持静态的大小

这是一个页面,演示了两种类型的“调整大小”:http://xavi.co/static/so-resizable-canvas.html

如果您想要第一种类型的调整大小(拉伸内容),然后将画布放入容器div中,并使用CSS将画布的宽度和高度设置为100%。这是代码可能是这样的:

  1. /* The CSS */
  2. #stretch {
  3. height: 100px;
  4. width: 200px;
  5. }
  6.  
  7. #stretch canvas {
  8. width: 100%;
  9. height: 100%;
  10. }
  11.  
  12. <!-- The markup -->
  13. <div id="stretch"><canvas></canvas></div>
  14.  
  15. // The JavaScript
  16. $("#stretch").resizable();

第二种调整大小(静态内容)是一个两步的过程。首先,您必须调整canvas元素的width和height属性。不幸的是,这样做会清除画布,所以你必须重新绘制所有的内容。这里有一点代码

  1. /* The CSS */
  2. #resize {
  3. height: 100px;
  4. width: 200px;
  5. }
  6.  
  7. <!-- The markup -->
  8. <div id="resize"><canvas></canvas></div>
  9.  
  10. // The JavaScript
  11. $("#resize").resizable({ stop: function(event,ui) {
  12. $("canvas",this).each(function() {
  13. $(this).attr({ width: ui.size.width,height: ui.size.height });
  14.  
  15. // Adjusting the width or height attribute clears the canvas of
  16. // its contents,so you are forced to redraw.
  17. reDraw(this);
  18. });
  19. } });

目前,当用户停止调整窗口小部件的大小时,上面的代码重新绘制了画布的内容。可以在resize上重新绘制画布,但调整大小的事件相当频繁地发生,重新绘制是昂贵的操作 – 谨慎使用。

猜你在找的jQuery相关文章