QT-QML: Как создать изображение (линию) и работать с ним

Question

Мне нужно создать и переместить изображение в Qt, но я не могу понять, как это сделать. Изображение представляет собой строку, подобную следующей:

В результате я хотел бы получить строку, которую я могу сдвинуть вправо или влево (она должна продолжаться даже за пределами холста на несколько сантиметров) и раскрасьте линию (или подсвечивая ее белым с другим фоном), когда я вызываю функцию.

Для этого я использую файл qml в qt, и я создаю эту строку используя объект Canvas, но он находится далеко от изображения, показанного ранее:

Canvas {
    id: mycanvas
    width: 1000; height: 600
    contextType: "2d"
    property var l_mez: 273
    property var pp: 245

    Path {          
        id: myPath
        startX: 100; startY: 300
        PathCurve { x: (100+(mycanvas.l_mez/2)); y: (300+mycanvas.pp/2) }
        PathCurve { x: 100+(mycanvas.l_mez*3/2)-40; y: 300-mycanvas.pp/2+15 }
        PathCurve { x: 100+(mycanvas.l_mez*3/2)+40; y: 300-mycanvas.pp/2+15 }

        PathCurve { x: 100+(mycanvas.l_mez*2); y: 300}

        PathCurve { x: 100+(mycanvas.l_mez*5/2); y: 300+mycanvas.pp/2 }
        PathCurve { x: 100+(mycanvas.l_mez*7/2); y: 300-mycanvas.pp/2 }
    }


    onPaint: {          
        var ctx = getContext("2d");
        ctx.strokeStyle = "grey"; 
        ctx.path = myPath;
        ctx.lineWidth =9
        ctx.stroke();
    }

Результат:

Вопрос в том, как могу ли я правильно нарисовать линию на первом изображении? Я думал, что могу просто создать изображение и импортировать его, но потом я не мог сдвинуть его и изменить цвет линии, как я предпочитаю.

Спасибо за помощь

Answer 1

PathCurve действительно переоценивает кривую в вашем примере, откуда исходит волнистость. Вместо этого я бы использовал чередование PathLine и PathArc для достижения такого вида.

Обратите внимание, вы можете сделать это с изображением также, если вы готовы отказаться от изменения цвета линии. Вы можете дважды загрузить образец изображения выше и разместить их рядом друг с другом, чтобы они соединялись без проблем. Вы поместите их оба внутри одного объекта и включите отсечение.

Затем вы перемещаете их влево или вправо, чтобы придать ощущение движения. Когда вы добираетесь до дальнего конца изображений в любом направлении, вы просто перескакиваете перевод назад на ширину изображения и продолжаете движение.

Он будет выглядеть плавным и плавным для пользователя. Особенно, если вы используете XAnimator, поскольку они работают в отдельном потоке.