Question

我正在使用Konva并创建一个html画布对象并将其设置为我的形状图像。

我在画布内绘制了这个图像形状的宽度和高度（横跨顶部和左下），这个图像也是可缩放的，所以我试图解决当我的形状（画布）是时出现的模糊文本问题使用Konva变换器旋转或缩放。

通过阅读这个问题，我已经提出了以下代码，它几乎解决了我的问题，但是当形状调整到初始比例时，我仍然没有得到清晰的文本 - 所以如果我拖动调整大小只有宽度或高度，然后我的文字再次变得模糊，但如果我通过拖动Transformer的角落或调整一些宽度然后一些高度我的字体是清晰的。

任何人都可以解释为什么这仍然会发生吗？

function fillRectangle(isHover)
{

    if(lastItem)//last touched or last added shape
    {
        var lastWidth = ""+parseInt(lastItem.getClientRect().width);
        var lastHeight = ""+parseInt(lastItem.getClientRect().height);

        if(parseInt(lastItem.getClientRect().width) != lastItem.originalWidth)
        {
            var oldWidth = lastItem.getClientRect().width;
            var oldHeight = lastItem.getClientRect().height;

            lastItem.actual_canvas.width = oldWidth ;//* ratio;
            lastItem.actual_canvas.height = oldHeight ;//* ratio;   

        }
        var ctx = lastItem.canvas; //canvas contains the ctx
        ctx.clearRect(0, 0, lastItem.actual_canvas.width, lastItem.actual_canvas.height);
        ctx.fillStyle="#fff";

        if(lastItem.isColliding)
        ctx.fillStyle = 'red';
        else if(isHover)
        ctx.fillStyle = 'black';

        ctx.fillRect(0,0,lastItem.originalWidth * (lastItem.actual_canvas.width / lastItem.originalWidth), lastItem.originalHeight * (lastItem.actual_canvas.height / lastItem.originalHeight));
        ctx.stroke();
        ctx.save();

        if( isHover || lastItem.isColliding)
        ctx.fillStyle = 'red';
        else
        ctx.fillStyle = 'black';


        var posX = (lastItem.actual_canvas.width/2);
        var posY = (lastItem.actual_canvas.height/2); 

        if(lastItem.rotation() == 90 || lastItem.rotation() == 270)
        {
        var fontSize = 12 * (lastItem.actual_canvas.width / lastItem.originalWidth);
        ctx.font = fontSize+"px sans-serif";
        ctx.textBaseline = 'top';
        ctx.textAlign = 'center';

        ctx.fillText(lastWidth,posX, 2);
        ctx.translate( 0, 0 );
        ctx.save();
        ctx.rotate(Math.PI/2 );
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        ctx.fillText(lastHeight,posY,-(lastItem.actual_canvas.width/15));
        ctx.save();
        ctx.restore();
        }
        else//roation must be 0 or 180
        {
        var fontSize = 12 * (lastItem.actual_canvas.width / lastItem.originalWidth);
        ctx.font = fontSize+"px sans-serif";
        ctx.textBaseline = 'top';
        ctx.textAlign = 'center';
        ctx.fillText(lastWidth,posX, 2);
        ctx.translate( 0, 0 );
        ctx.save();
        ctx.rotate(Math.PI/2 );
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        ctx.fillText(lastHeight,posY,-(lastItem.actual_canvas.width/15));
        ctx.save();
        ctx.restore();
        }
        layer.draw();
    }
    else
    console.log("lastitem is null");


}

image of blurry text problem

Answer 1

画布将自动模糊给定小数坐标的图形。

尝试将它们舍入/转换为最接近的整数。

ctx.fillText("Text",xPos | 0,yPos | 0);
ctx.fillText("Text",parseInt(xPos),parseInt(yPos));

模糊的文字仍然在画布上

1 个答案: