2

要求： 所以我使用 html5 画布在 iPad(2732 * 2048) 上执行绘图并存储绘制的像素，以便我可以重复使用它们。

现在，我需要通过按像素重绘来在网站上显示与缩小版本 (615 * 460) 相同的绘图。

执行

我正在使用 fabric.js 来渲染画布。

缩小规模：

  1. 将画布的高度和宽度乘以调整大小比例，以便将绘图缩放到原始大小。
  2. 强制将容器的高度和宽度固定为显示图纸所需的尺寸。
  3. 使用 CSS 将容器填充到其尺寸的 100%。

问题 在 Chrome 中渲染时，绘图有别名，但它在非视网膜显示器上的 Safari 中正确渲染。

也用纯画布测试过，它的行为是一样的。

在 Chrome 上

在 Chrome 85 上绘图

在 Safari 上

在 Safari 14 上绘图

伪代码：（仅显示所需的设置和样式以避免复杂化）

// resizeRatio = 4.45 (2732 / 615);

   canvas = new fabric.Canvas('someId');
   canvas.enableRetinaScaling = false;
   canvas.freeDrawingBrush.color = '#000000';
   
   canvas.setWidth(460 * resizeRatio);
   canvas.setHeight(615 * resizeRatio);
   
   container = document.getElementbyId('container');

   container.style.width = (this.width) + 'px';
   container.style.height = (this.height) + 'px';
   
   brush = new fabric.PencilBrush(canvas);

   brush.width = 2.5;

  // Loop over each of the coordinates using mouse events on the brush to render the 
  // canvas.

HTML

<div id=container style=" width: 100% !important;height: 100% !important;">
   <canvas style=" width: 100% !important; height: 100% !important;" id="canvas"></canvas>. 
</div>

谢谢

4

1 回答 1

0

您不需要调整canvas.width&的大小，canvas.height因为它们与canvas.style.height&不同canvas.style.width。为了保持脆度，您不应降低画布的分辨率。

示例用例是我使用 4k 显示器，我可以window.devicePixelRatio用来知道设备与像素的比率是2. 然后我在画布上重新绘制我想画的东西，在这里我将大小乘以这个比率。canvas.width += canvas.width * deviceToPixelRatio，这使得图像清晰，也便于放大。

于 2020-11-30T08:55:55.123 回答