调整画布元素的大小(通过更改样式)时,我也想缩放画布的绘制图像。我不能只更改高度/宽度,因为这会导致画布自行清除,所以我这样做:
这会导致一些模糊-在多次调整大小后非常明显(例如:拖动以调整大小时)。我将如何做到这一点而又不模糊?
编辑:关闭图像平滑(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 );
*/
}
有没有办法获得笔画并“缩放”所有这些点并重绘?
与其从原始画布上获取渲染图像,不如说是重新绘制图像。这样,我的意思是执行与原始画布相同的逻辑,但是涉及的点将缩放到新的大小。
如果可以,请考虑改用SVG。它具有良好的伸缩性。
编辑:我想到的另一个选择是简单地使用巨大的画布开始。缩小的外观往往比放大的外观好,尤其是进行平滑处理时。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句