元素在画布上消失w / jsfiddle [英] Elements on the canvas disappear w/ jsfiddle

问题描述

在canvas中使用fabric.js时遇到问题。在以5倍缩放比例缩放后，单击ZoomIn 2次，画布上的元素消失。请查看： http://jsfiddle.net/ptCoder/Q3TMA/90/

画布大小（例如）：

 < canvas id = cwidth =400height =400>< / canvas> 
  

缩放比例因子：

  var SCALE_FACTOR = 5; 
  

有没有解决方案？

谢谢问题是，你也在调整画布大小，所以在放大2倍后，它的大小是10000px * 10000px。

如果您保持画布大小不变（例如 this ），或将其限制为足够小的值，缩放功能会按预期工作。

大小常数你只需要删除这两行：

  canvas.setHeight（canvas.getHeight（）* SCALE_FACTOR）; 
 canvas.setWidth（canvas.getWidth（）* SCALE_FACTOR）; 
  

I have a problem using fabric.js in canvas. After resize with scale factor at 5x, clicking in ZoomIn 2 times, the elements on the canvas disappear. Please look: http://jsfiddle.net/ptCoder/Q3TMA/90/

Canvas size (just for example):

<canvas id="c" width="400" height="400"></canvas>

Zoom Scale Factor:

var SCALE_FACTOR = 5;

Is there any solution?

Thank You.

解决方案

The problem is that you are also resizing the canvas, so after zooming 2 times, its size is 10000px * 10000px, meaning 100 megapixels, and several hundred megabytes of memory required.

If you keep the canvas size constant (like this), or limit it to a value small enough, zooming works as expected.

To keep the size constant you just have to remove these two lines:

canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

这篇关于元素在画布上消失w / jsfiddle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！