How to change the color of lines created by Canvas?
-
@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
fillColorproperty to redraw the canvas@KroMignon Thanks for ur reply. But when I tried ur code, color of rectangles is changing. But its not updating the previous painted rectangles with the current color. It is only changing the colors of future rectangles.
-
to add to @KroMignon
If you do not callctx.reset()at the beginning of youronPaintevent, you'll draw over the old stuff. That will cause problems, if you draw something with alpha component.So keep that in mind
-
@J-Hilk Thanks for ur advice. But my problem is with old stuff :). I want to change the color of old stuff
-
Can I assign the coordinates of painted rectangles to an array then draw these rectangles again? Can this be a solution?
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(); } } } }
Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct
Q: What's that?
A: It's blue light.
Q: What does it do?
A: It turns blue. -
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:
-
@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
Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct
Q: What's that?
A: It's blue light.
Q: What does it do?
A: It turns blue. -
@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
-
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(); } }
