canvas-controller/main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import "./simplify.js" as Simplify

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    MainForm {
        property int curImage:1;
        anchors.fill: parent
        button1.onClicked: {
            curImage=Math.min(curImage+1,5);
        }
        button2.onClicked: {
            curImage=Math.max(curImage-1,1);
        }
        onCurImageChanged: {
            canvas.change_image("EBA",curImage);
        }

        button3.onClicked: {
            canvas.paint_canvas();
        }

        mouseArea1.onPressed: {
            canvas.start_path();
        }

        mouseArea1.onPositionChanged: {
            canvas.add_point({x:mouse.x,y:mouse.y});
            //canvas.paint_canvas();
        }
        mouseArea1.onReleased: {
            canvas.finish_path();
        }

        Canvas {
            id: canvas
            width: 320
            height: 250
            antialiasing: true

            property color strokeStyle: Qt.darker(fillStyle, 1.2)
            property color fillStyle: "#6400aa"

            property int lineWidth: 2
            property real px: width/2
            property real py: height/2 + 10
            property real alpha: 1.0
            property variant points_array: [ ]
            property string curImageUrl: "https://plataforma.especificosba.com.ar/diapo/EBA/1.png";

            onPaint: paint_canvas();
            onLineWidthChanged: requestPaint();
            onImageLoaded: requestPaint();

            function start_path(){
                points_array.push([]);
            }

            function finish_path(){
                points_array[points_array.length-1]=Simplify.simplify(points_array[points_array.length-1],3);
                requestPaint();
                //ws.send()..
            }

            function change_image(pdf,number){
                curImageUrl="https://plataforma.especificosba.com.ar/diapo/"+pdf+"/"+number+".png";
                requestPaint();
            }

            function add_point(p) {
                points_array[points_array.length-1].push(p);
                requestPaint();
            }

            function paint_canvas(){
                var curColor= '#ff0000';
                var ctx = canvas.getContext("2d");
                canvas.loadImage(curImageUrl);
                if (canvas.isImageLoaded(curImageUrl)){
                    ctx.drawImage(curImageUrl,0,0,canvas.width,canvas.height);
                }
                ctx.lineCap = 'square';
                ctx.lineWidth = 2;
                ctx.strokeStyle = curColor;

                ctx.beginPath();
                var i=0,j=0;
                for(j=0;j<points_array.length;j++){
                    var points = points_array[j];
                    ctx.moveTo(points[0].x,   points[0].y);
                    for(i=0;i<points.length-1;i++){
                        ctx.moveTo(points[i].x,   points[i].y);
                        ctx.lineTo(points[i+1].x, points[i+1].y);
                    }
                }
                ctx.stroke();
            }

        }
    }


}