[Martin]

Hi,

I created a canvas which loads an image I can use to draw on. Unfortunately the image quality is very bad. How can I use the original resolution on my canvas?

I use PinchArea to scale and drage the image/canvas. But then the “thumbnail” is scaled and you can see the bad quality. The original image has a resolution of 300 dpi. So it should be displayed in top quality.

Here is my code:

import Felgo 3.0
import QtQuick 2.11
import "../common"

/**
* Show paint area
*/
Page {
    id: drawingsPage
    title: "Drawings page"
    property string paintColor: "#000000"
    property string ticketId: ""
    property string projectId: ""
    property string filePath: "file:///var/mobile/Containers/Data/Application/063D1917-6A5A-41F4-BF57-0560F33E1322/Library/Application Support/Felgo Live Client/_packages/60640c364fc28.jpg"
    property var media
    property bool drawMode: false

    Rectangle {
        id: topRow
        z: 100
        width: parent.width;
        height: 65;
        color: "#333333"

        Row {
            id: colorTools
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
                topMargin: 8
            }


            // Save image
            AppButton {
                id: buttonPinch
                text: "Drawing mode"
                iconLeft: IconType.pencil
                iconSize: dp(32)
                textColor: "white"
                onClicked: {
                    drawMode = pinchArea.enabled
                    pinchArea.enabled = !pinchArea.enabled
                    console.log("Pincharea enabled: " + pinchArea.enabled)
                    console.log("DrawMode: " + drawMode)
                    textColor = drawMode ? "orange" : "white"
                }
            }

            // reset drawing
            AppButton {
                id: buttonReset
                text: "reset"
                iconLeft: IconType.undo
                iconSize: dp(32)
                textColor: "white"
                onClicked: {
                    mycanvas.resetDraw = true
                    mycanvas.requestPaint()
                }
            }

            // Colors
            //property variant activeSquare: red
            property color paintColor: "#33B5E5"
            spacing: 4
            Repeater {
                model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]
                ColorSquare {
                    id: red
                    color: modelData
                    active: drawingsPage.paintColor == color
                    onClicked: {
                        drawingsPage.paintColor = color
                    }
                }
            }


            // Save drawing
            AppButton {
                id: buttonSave
                text: "Save"
                iconLeft: IconType.save
                iconSize: dp(32)
                textColor: "white"
                onClicked: {
                    var justFileName = fileUtils.cropPathAndKeepFilename(media.MEDIA_FILE_NAME, true)
                    NativeDialog.inputText("Save drawing", "Please enter filename", "filename: ", "", function(ok, text) {
                        if(ok) {
                            var fName = text + ".jpg"
                            var timestamp = new Date().getTime()
                            var fPath = fileUtils.storageLocation(FileUtils.AppDataLocation) + "_packages/" + timestamp + ".jpg";
                            if(mycanvas.save(fPath)) {
                                console.log("file saved!")
                                buttonClose.clicked()
                            }
                            else {
                                console.log("Couldn't save file!")
                            }
                        }
                    })
                }
            }

            // Zeichnung speichern
            AppButton {
                id: buttonClose
                text: "Close"
                iconLeft: IconType.close
                iconSize: dp(32)
                textColor: "white"
                onClicked: {
                    app.drawingsPageClosed(drawingsPage)
                    //drawingsPage.navigationStack.pop()
                }
            }
        }
    }

    // Drawings area
    Canvas {
        id: mycanvas
        property bool firstdraw: false
        property string imagefile: filePath
        property real lastX
        property real lastY
        property bool resetDraw: false
        property color color: drawingsPage.paintColor //colorTools.paintColor
        y: topRow.height
        width: parent.width
        height: parent.height - topRow.height
        Component.onCompleted: {
            loadImage(mycanvas.imagefile)
        }
        onImageLoaded: {
            firstdraw = true
            requestPaint();
        }

        onPaint: {
            var ctx = getContext("2d")
            var ctxImg = getContext("2d")

            if(resetDraw) {
                ctx.clearRect(0, 0, mycanvas.width, mycanvas.height)
                pinchArea.scale = 1.0
                console.log("Context geleert")
            }

            // Draw image only once
            if(firstdraw || resetDraw) {

                ctxImg.scale(pinchArea.scale, pinchArea.scale);
                var imgData = ctxImg.createImageData(mycanvas.imagefile)
                ctxImg.drawImage(imgData, 0, 0, imgData.width, imgData.height, 0, 0, mycanvas.width, mycanvas.height)
                //ctxImg.scale()
                firstdraw = false
                resetDraw = false
            }

            // Drawings
            if(drawingsPage.drawMode === true) {
                ctx.lineWidth = 3
                ctx.strokeStyle = mycanvas.color
                ctx.beginPath()
                ctx.moveTo(lastX, lastY)
                lastX = area.mouseX * pinchArea.scale
                lastY = area.mouseY * pinchArea.scale
                ctx.lineTo(lastX, lastY)
                ctx.stroke()
            }

            ctx.restore()

        }
        MouseArea {
            id: area
            anchors.fill: parent
            onPressed: {
                mycanvas.lastX = mouseX * pinchArea.scale
                mycanvas.lastY = mouseY * pinchArea.scale
            }
            onPositionChanged: {
                mycanvas.requestPaint()
            }
        }
    }

    // Zoom and drag
    PinchArea {
        id:pinchArea
        y:mycanvas.y
        x:mycanvas.x
        width: mycanvas.width
        height: mycanvas.height

        pinch.minimumScale: 0.2
        pinch.maximumScale: 5.0
        pinch.target:mycanvas
        pinch.dragAxis: Pinch.XAndYAxis
        enabled:true

    }

}

Hope someone can help.

Regards
Martin

[AlexFelgo Team]

Hi Martin,

without a deeper look in your code, what about scaling the Canvas itself (using transform: Scale { ... } and set width/height accordingly)? Then the Canvas “offers more pixels” to draw a higher quality image onto.

If you can provide a minimal runnable example (also including an App root) it would also be easier to directly try your code and mess around with it.

Best,
Alex

[Martin]

Hi Alex,

basically I just want to see an high resolution image on my canvas. But all I get is a very poor quality image. I think it depends on the provided “number of pixels” of the canvas. So how can I get more pixels?

Regards
Martin

[AlexFelgo Team]

As suggested, by icreasing the canvas size and scaling it down proportionally, would be an the most obvious option that crosses my mind. We are using similar techniques for certain Scene scaling mechanisms of game components.

Best,
Alex

[Martin]

Ah, now I understand how it’s working. Thank you.

One last point: I couldn’t find how to center my view on the middle of the canvas. Can you give me a hint?

Thank you very much
Martin

[AlexFelgo Team]

Hm I am not sure if I can fully follow you there. Is this about centering the image in the canvas? You could make the canvas size follow the image size and rather center the canvas itself?

Best,
Alex