QML Canvas中的SVG光柵化問題

Question

我在使用QML Canvas drawImage方法呈現SVG圖標時遇到問題。 基本上，QML Canvas會忽略光柵化大小並從其原始大小（本例中爲48x48px）開始繪製圖像，並使用醜陋的混疊效果進行擴展。

有沒有人見過這個，可能想出了一個解決方案？

請參閱QTBUG-59878瞭解一個獨立工作的示例。 在這裏，我要複製QML代碼和我看到的截圖。

左起：

• 原來的SVG圖標，圖象項目（正確）
• 通過的drawImage呈現相同的圖像項目（說實話，我希望這是爲正確好吧，因爲光柵化數據應該由Image提供）
• SVG圖標加載了documentation中說明的過程，帶有loadImage和onImageLoaded

進口QtQuick 2.0

Rectangle 
{ 
    width: 640 
    height: 480 

    Image 
    { 
     id: svgIcon 
     source: "qrc:/qt_logo.svg" 
     x: 10 
     y: 100 
     width: 180 
     height: 200 
     sourceSize: Qt.size(width, height) 
    } 

    Canvas 
    { 
     id: canvas 
     anchors.fill: parent 
     contextType: "2d" 
     property string imagefile: "qrc:/qt_logo.svg" 

     Component.onCompleted: context.loadImage(imagefile) 

     onImageLoaded: requestPaint() 

     onPaint: 
     { 
      context.drawImage(svgIcon, 200, 100, 180, 200) 
      context.drawImage(imagefile, 400, 100, 180, 200) 
     } 
    } 
} 

Answer 1

我與SVG內QML工作，表現非常差，倍增的質量和降頻轉換不夠好。如果你使用SVG來顯示圖標，我會建議你使用字體而不是svg圖標，它的速度和質量都很高。您可以將您的svg圖標轉換爲字體字符，並將它們打包爲單一字體，並在QML中將其用作文本或標籤元素，如圖所示Iconmoon.io