canvasZoom.js 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. //配置
  2. var config = function() {
  3. return {
  4. height: 1080, //默认画板高、宽
  5. width: 1920,
  6. canvasParentId: "canvasDiv",
  7. canvasId: "c"
  8. };
  9. };
  10. //初次设置画板
  11. (function() {
  12. setZoom(window.canvas);
  13. })();
  14. //设置缩放
  15. function setZoom(canvas) {
  16. var canvasDiv = jQuery("#" + config().canvasParentId);
  17. var zoom = 1;
  18. var eleHeight = canvasDiv.height(),
  19. eleWidth = canvasDiv.width(),
  20. cHeight = canvas.height,
  21. cWidth = canvas.width;
  22. var height = eleHeight > cHeight ? eleHeight : cHeight;
  23. var width = eleWidth > cWidth ? eleWidth : cWidth;
  24. if (width > height) {
  25. //横版
  26. width = eleWidth;
  27. height = eleHeight;
  28. zoom = width / config().width;
  29. } else {
  30. //竖版
  31. height = height * eleHeight / config().height * 0.8;
  32. zoom = height / config().height;
  33. }
  34. canvas.setZoom(zoom);
  35. canvas.setWidth(width);
  36. canvas.setHeight(height);
  37. window.zoom = zoom;
  38. canvas.renderAll();
  39. }
  40. //监听窗体变化
  41. window.onresize = function() {
  42. setZoom(window.canvas);
  43. };