如何在画布上重新绘制以调整大小而不会模糊?

唐·拉米

调整画布元素的大小(通过更改样式)时,我也想缩放画布的绘制图像。我不能只更改高度/宽度,因为这会导致画布自行清除,所以我这样做:

  1. 创建一个临时画布元素
  2. 将当前画布的图像绘制到该临时画布上
  3. 调整当前画布的大小
  4. 将临时画布的图像绘制回当前画布,但缩放到新大小

这会导致一些模糊-在多次调整大小后非常明显(例如:拖动以调整大小时)。我将如何做到这一点而又不模糊?

编辑:关闭图像平滑(context.webkitImageSmoothingEnabled = false;)并没有解决这个问题,它只是让重绘越来越参差不齐,直到数量调整大小后的图像看起来一点也不像原来的。

调用调整大小事件:

    var tmpCanvas = null;       

    //Make a temporary canvas
    tmpCanvas = document.createElement( "canvas" );

    //Set its size to be equal
    tmpCanvas.height = originalCanvas.height;
    tmpCanvas.width = originalCanvas.width;

    //Draw our current canvas onto it
    tmpCanvas.getContext( "2d" ).drawImage( originalCanvas, 0, 0 );

    //Set new dimensions
    originalCanvas.width = originalCanvas.offsetWidth;
    originalCanvas.height = originalCanvas.offsetHeight;

    var originalContext = originalCanvas.getContext( "2d" );

    //Set background and colors
    originalContext.fillStyle = "#ffffff";
    originalContext.strokeStyle = "#000000";

    //Set paintbrush
    originalContext.lineWidth = 4;
    originalContext.lineCap = "round";

    //Fill background as white
    originalContext.fillRect( 0, 0, originalCanvas.width, originalCanvas.height );

    //We have a saved signature
    if ( SignatureCanvas.hasSignature === true )
    {
        //Draw it back but scaled (results in blurred image)
        originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, originalCanvas.width, originalCanvas.height );

        /** 
         * This results in a blurred image as well
         //Draw it back but scaled
         originalContext.scale( originalCanvas.width / tmpCanvas.width, originalCanvas.height / tmpCanvas.height );
         originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, tmpCanvas.width, tmpCanvas.height );
         */
    }

有没有办法获得笔画并“缩放”所有这些点并重绘?

萨曼莎·布拉汉姆(Samantha Branham)

与其从原始画布上获取渲染图像,不如说是重新绘制图像。这样,我的意思是执行与原始画布相同的逻辑,但是涉及的点将缩放到新的大小。

如果可以,请考虑改用SVG。它具有良好的伸缩性。

编辑:我想到的另一个选择是简单地使用巨大的画布开始。缩小的外观往往比放大的外观好,尤其是进行平滑处理时。

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调整大小而不会模糊

来自分类Dev

如何在画布上移动/调整大小/旋转ContentControl?

来自分类Dev

调整窗口大小时重新绘制/擦除画布

来自分类Dev

在tkinter中调整画布大小并重新绘制

来自分类Dev

在鼠标绘图上重新绘制画布并调整其大小

来自分类Dev

调整窗口大小时重新绘制/擦除画布

来自分类Dev

在画布上绘制可调整大小的矩形

来自分类Dev

如何在没有像素模糊的情况下调整html5画布的大小

来自分类Dev

在画布中绘制时如何调整位图的大小?

来自分类Dev

如何调整画布大小

来自分类Dev

如何在窗口调整大小时重新绘制SVG地图?

来自分类Dev

如何在画布上随机绘制对象

来自分类Dev

[WPF]如何在画布上绘制网格?

来自分类Dev

如何在画布上绘制RelativeLayout?

来自分类Dev

如何在画布上绘制读取JSON?

来自分类Dev

如何在画布元素上绘制视频?

来自分类Dev

Java:如何在画布上绘制?

来自分类Dev

如何强迫设计师重新绘制调整大小的矩形?

来自分类Dev

如何在窗口调整大小时重绘画布

来自分类Dev

在WinForms上绘制大小调整后的图像似乎具有“模糊”边缘

来自分类Dev

如何在窗口调整大小上删除/重新加载机车滚动?

来自分类Dev

画布:在不模糊的情况下调整图像大小

来自分类Dev

画布粒子-在“窗口调整大小”上更新画布大小

来自分类Dev

如何在TensorFlow中绘制调整大小的图像?

来自分类Dev

调整大小时重新绘制SVG

来自分类Dev

在窗口调整大小上动态调整画布大小

来自分类Dev

在tkinter画布上动态调整矩形大小

来自分类Dev

画布上的视频不断调整大小

来自分类Dev

如何调整图像大小并避免图像模糊?

Related 相关文章

热门标签

归档