Multi tool use

Snap text to a point

In my test application I am drawing triangles. In the down left corner of this triangle (lest call it nr 2) I need to add text that is just under the line. If the triangle rotates, the text should rotate as well. Heres an "explanation" image:

And here is the code:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

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

Rectangle
{
id: rectMain
anchors.centerIn: parent
width: parent.width
height: parent.height
color: "white"

Item
{
anchors.fill: parent
rotation: 0

property real trheight: 0;
property real hfBase: 0;

Canvas
{
id: canvas
anchors.fill: parent

// set properties with default values
property real hFactor: 1 // height factor
property real trbase: 200
property color strokeColor: "black"
property color fillColor: "yellow"
property int lineWidth: 1
property real alpha: 1
property real parentWidth: parent.width; // try
property real parentHeight: parent.height;

onStrokeColorChanged: requestPaint();
onFillColorChanged: requestPaint();
onLineWidthChanged: requestPaint();

onPaint:
{
hFactor = Math.abs(hFactor)

var ctx = getContext("2d") // get context to draw with
ctx.clearRect(0, 0, width, height); // remove what is painted so far
ctx.lineWidth = lineWidth
ctx.strokeStyle = strokeColor
ctx.fillStyle = fillColor
ctx.globalAlpha = alpha

ctx.save();
ctx.beginPath();
ctx.translate(parentWidth / 2, parentHeight / 2);
ctx.moveTo(0, 0);

// drawing part, first calculate height using Pythagoras equation
parent.trheight = (Math.sqrt(Math.pow(trbase, 2) -
Math.pow(trbase / 2, 2))) * hFactor;

parent.hfBase = trbase * hFactor;
ctx.lineTo(parent.hfBase / -2, parent.trheight); // left arm
ctx.lineTo(parent.hfBase / 2, parent.trheight); // right arm

ctx.closePath(); // base drawn automatically
ctx.fill();
ctx.stroke();
ctx.restore();
}
}

DropShadow
{
anchors.fill: canvas
horizontalOffset: 0
verticalOffset: 3
radius: 3
samples: 7
color: "#80000000"
source: canvas
}
}

Text
{
//x: ?
//y: ?

font.family: "RobotoCondensed-Regular";
font.pointSize: 12;
text: qsTr("TEST");
opacity: 0.6;
}
}
}


So ideally the end effect would look like this (edited in paint):

Then on 30 degree rotation like this:

I would appreciate all help regarding this.

1 Answer
1

The easiest way would be to have the Text as a child item of the item that is rotated. Then you could just position it at the bottom of it and it would rotate with its parent.

Text

However, your canvas covers the whole window, so your only option (given the current code) is to draw the text when you draw the shape. You can draw text with text(), fillText() or strokeText().

text()

fillText()

strokeText()

I would suggest rewriting your code to use the first approach I mentioned. Give each shape its own canvas, and make the text a child of the Canvas item (or its parent if you don't want the drop shadow effect to be applied to the text). Rotating an item is much cheaper than rotating by repainting a Canvas.

Canvas

Canvas

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.