How to change the color of lines created by Canvas?
-
Hi all,
I created a painted image using canvas "fillRect" with the color of "blue". After the process of painting, I want to change my painted rectangles' color to another desired color(like black,yellow etc.). Here is my code:
Canvas { id: mycanvas width: 300 height: 300 property real lastX property real lastY onPaint: { var ctx = getContext("2d"); ctx.fillStyle = "blue"; lastX = painter_object.x+painter_object.width/2 lastY = painter_object.y+painter_object.width/2 ctx.fillRect(painter_object.x, painter_object.y, painter_object.width, painter_object.width); ctx.fill() ctx.stroke(); } }
-
@Yunus Hello, it is simple, define a property for the fill color and listen on it changes:
Canvas { id: mycanvas width: 300 height: 300 property real lastX property real lastY property color fillColor: "blue" onFillColorChanged: requestPaint(); onPaint: { var ctx = getContext("2d"); ctx.fillStyle = "blue"; lastX = painter_object.x+painter_object.width/2 lastY = painter_object.y+painter_object.width/2 ctx.fillRect(painter_object.x, painter_object.y, painter_object.width, painter_object.width); ctx.fill() ctx.stroke(); } }
Now, you just have to change the
fillColor
property to redraw the canvas -
to add to @KroMignon
If you do not callctx.reset()
at the beginning of youronPaint
event, you'll draw over the old stuff. That will cause problems, if you draw something with alpha component.So keep that in mind
-
import QtQuick 2.12 import QtQuick.Controls 2.12 import QtQuick.Window 2.2 Window { visible: true width: 100 height: 100 title: qsTr("Hello World") id:window Item{ id:myItem anchors.fill: parent property int iteration: 0 onIterationChanged: myCanvas.requestPaint() Timer{ id: tRedraw interval: 20 repeat: true running: true onTriggered: { myItem.iteration++ if(myItem.iteration > window.width) myItem.iteration = 0 } } property var colors: ["blue", "red", "yellow", "green"] Canvas{ id:myCanvas anchors.fill: parent onPaint:{ var ctx = getContext("2d"); ctx.fillStyle = myItem.colors[(myItem.iteration % 4)]; ctx.fillRect(myItem.iteration, myItem.iteration, window.width - (myItem.iteration * 2), window.height - (myItem.iteration * 2)); ctx.fill() ctx.stroke(); } } } }
-
@J-Hilk I still dont think this is a solution for me or I am thinking wrongly. Let me be more clear. I have an image which is painted with blue rectangles. After the painting process, I want to press a button and want these blue painted rectangles to change to a different color. Image is below:
-
@Yunus well, no drawn is drawn.
You can however save the rectangles, those that you draw, in an array. And when you want to change the color you clear the canvas (reset()) and paint them all anew from that array, but with a different color