Question

我已将图像添加到画布中并动态地想要根据矩形高度和宽度更改图像的高度和宽度。我根据矩形的高度和宽度以及原始图像的高度和宽度来计算图像的高度和宽度。

使用下面的代码我改变了图像的高度和宽度，但图像质量变得非常低

var image_height = 200; //For now here image height is dummy
var image_width = 150; //For now here image width is dummy
var obj = canvas.getActiveObject();
obj.setHeight(image_height);
obj.setWidth(image_width);
obj.setCoords();
canvas.renderAll();

Answer 1

几天前我遇到了同样的问题。我找到的解决方案是不要尝试设置width和height，而是要求您的图片缩放直到画布尺寸。

我是这样做的：

var scaleWidth = canvas.getWidth() / img.width;
var scaleHeight = canvas.getHeight() / img.height;
var scale = Math.min(scaleWidth, scaleHeight);
bgImage = new fabric.Image(img, {
    [...]
    scaleX: scale,
    scaleY: scale,
    [...]
  });
canvas.add(bgImage);
canvas.sendToBack(bgImage); // useful in case you want a background but not **needed**
canvas.renderAll();

在上面的代码中，我计算宽度和高度比率，选择较低的比率，然后使用scaleX和scaleY属性将其应用于图片。

如果它仍然不适合您，请在评论中告诉我。

编辑：为了更加清晰，我完成了我的链接代码。

第二次编辑：此处显示名为scale的方法，可用于您的图片。如果您想保持比率（scaleX和scaleY属性具有相同的值，则看起来更干净。）

Answer 2

将画布导出到图像时，可以添加乘数。它将提高分辨率和图像大小。

class CreateToolTip(object):
    """
    create a tooltip for a given widget
    """
    def __init__(self, widget, tooltip_width=180, text='widget info'):
        self.waittime = 500     #miliseconds
        self.wraplength = tooltip_width   #pixels
        ...

# testing ...
if __name__ == '__main__':
    root = tk.Tk()
    btn1 = tk.Button(root, text="button 1")
    btn1.pack(padx=10, pady=5)
    button1_ttp = CreateToolTip(btn1, 180,\
   'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, '
   'consectetur, adipisci velit. Neque porro quisquam est qui dolorem ipsum '
   'quia dolor sit amet, consectetur, adipisci velit. Neque porro quisquam '
   'est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.')

    btn2 = tk.Button(root, text="button 2")
    btn2.pack(padx=10, pady=5)
    button2_ttp = CreateToolTip(btn2, 500,\
    "First thing's first, I'm the realest. Drop this and let the whole world "
    "feel it. And I'm still in the Murda Bizness. I could hold you down, like "
    "I'm givin' lessons in  physics. You should want a bad Vic like this.")
    root.mainloop()

在动态设置图像高度和宽度后，结构js图像质量不佳

2 个答案: