31. QML仿制思维导图系列02 -- 绘制初始三角形

已于 2023-05-12 11:42:13 修改
阅读量572 收藏
点赞数
分类专栏： QML / QT常用技巧汇总 文章标签： qt QML
于 2023-05-11 17:01:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FY_13781298928/article/details/130623713
版权
本文是QML仿制思维导图系列的第二部分，主要介绍了如何在QML中创建一个跟随节点移动的三角形。通过在NodeItem.qml中定义绘制函数和响应鼠标移动的函数，实现了节点移动时三角形同步更新的效果。
摘要由CSDN通过智能技术生成

1. 说明

本系列文章最终目的是利用QML设计一个类似思维导图的小软件，可以基本实现节点之间的连线问题
第一版最终效果：

思维导图第一版最终效果


本篇文章在上篇文章的基础上继续开发，增加 初始三角形绘制 功能。上篇文章为： QML仿制思维导图系列01 – 搭建基本框架

2. 基本步骤

大致思路就是在产生节点时，要首先在节点的右侧绘制一个三角形，此三角形为起初的三角形，当节点本身被鼠标拖拽移动后，要实时的对画布绘图区域进行

了解本专栏 订阅专栏 解锁全文
山间点烟雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
史上最强的 QML 思维导图
青春不老，奋斗不止！
08-15 3034
这是一份史上最强、最高清、最好用的 QML 思维导图
兼容Qt4/Qt5版本Qml控件Triangle
Qt君
10-24 460
三角形控件(Triangle)，等腰直角三角形。底是高的两倍。
QML画三角形代码
Qt君
12-30 4169
源代码 import QtQuick 2.5 Canvas {     id: canvasId     property color triangleColor: "#474747"     width: parent.width; height: parent.height     contextType: "2d"     onPaint: {         context.l...
qml 实现按钮样式（ 带个小三角）
一个老菜鸟的学习分享
04-16 1554
qml 带有小三角的按钮
qml实现Json可视化（头脑风暴、思维导图）
一个老菜鸟的学习分享
03-19 3244
qml 实现Json可视化
30. QML仿制思维导图系列01 -- 搭建基本框架
山间点烟雨
05-08 671
利用QML设计一个类似思维导图的小软件
32. QML仿制思维导图系列03 -- 添加连线功能
山间点烟雨
05-12 787
当小箭头的鼠标控制区域发生移动后，要更新绘图区域的尺寸（否则当节点产生后，若节点为移动，仅拖拽小三角形，无法绘制完整连接线）和鼠标控制区域的位置（否则当鼠标松开后，无法再对连线末端的箭头进行拖拽），其位置应与鼠标箭头位置保持一致。大致思路就是在右侧三角形上面设置一个鼠标控制区域，当拖动这个区域时，让画布重新绘制，此时重新绘制的内容要包括根部的小三角形，连接线（三次曲线）和线顶端的小箭头。本系列文章最终目的是利用QML设计一个类似思维导图的小软件，可以基本实现节点之间的连线问题。思维导图第一版最终效果。
QML - 可视元素 Rectangle （1)
gooderfeng的专栏
06-13 1634
Rectangle 就和它的意思一样，就是画一个实心的方形，几乎所有的QML 可视元素都是一个方形，如果想做一个类似圆形，三角形或者多边形都不是特别容易。 Item 是Rectangle的父类，所以Item所有的属性在Rectangle都有效，而且Rectangle 是可见的。 除了Item内部的一些属性，在Rectangle 里面也有一些自己的属性： Rectangle可以具有一个边框，并
在QtQuick中使用Vulkan API绘制三角形Demo
黑色低级高中生的博客
04-25 1181
项目结构QQuickView做主窗体，加载QML资源使用继承自QQuickItem的QVulkanScene来绘制自定义内容为QVulkanScene设置内置的VkRenderer类，提供渲染操作通过链接SceneGraph发送的信号来调用每一次的绘制流程使用QQuickWindow->begin/endexternalCommands结合获取的绘图commandBuffer执行自定义ren...
android canvas 画曲线图 画三角形（多边形）
06-14
android 画曲线图 画三角形（多边形），可以画成股票K线图，儿童成长曲线等，使用android的canvas
Qt实现高级思维导图
08-01
运用Qt框架实现高级思维导图，可支持添加、删除、剪切、复制、粘贴、插入超链接、插入背景图片、属性查看等功能，可供学习和研究。
qt5_qml_opengl_shader显示yuv
05-14
通过qt5 qml opengl shader来进行yuv的渲染（其实是通过shader调用gpu转码） 吧testyuv.yuv放置在d盘根目录，若果用别的yuv数据的话需要在程序改变分辨率
基于QT QML的动态旋转箭头
06-08
基于QT QML的动态旋转箭头，采用QML的方式实现的。。。
《细说 QML》
热门推荐
青春不老，奋斗不止！
02-27 4万+
全新的 QML，基于 Qt6 + CMake，清晰的思维导图，透彻的示例程序，超全面的章节。
Canvas -- 状态保存与恢复
xt18971492243的博客
02-16 390
import QtQuick 2.15 import QtQuick.Window 2.15 Window { width: 640 height: 480 visible: true title: qsTr("Hello World") //Canvas是一个状态机，用save保存以前属性，restore弹出以前属性 Canvas{ id:mycanvas width: 200 height: 200
qml 使用Shape 画图形
最新发布
王春雨的博客
05-26 1924
最近在做项目的时候想这实现一个能够根据相对位置动态改变大小的进度条提示框，偶尔发现了一个很有用的组件Shape这个控件里面可以画各种线条,实线虚线矩形三角形圆角的三角形或者各种自定义形状。下面提供一个2条虚线加上一个矩形的小栗子。更多的自定义形状还是请自行钻研。dashPattern: [1, 3] // 设置虚线的样式。dashPattern: [1, 3] // 设置虚线的样式。上面这个例子如果用js 实现代码量不敢想象，用这个控件看起来非常简单。
QML中Rectangle的用法和属性
CN小黑
03-12 1万+
盒子模型也是QML的特点之一。这里最值得一提的还是Rectangle这个item，因为他的用处很广泛。他可以用来对某个区域进行操作和绘制。比如你要在特定的地方指定接收鼠标单击事件，或者某个地方显示特定的颜色。 简单看一看Rectangle的一些属性。 import QtQuick 2.3 import QtQuick.Window 2.2 Window { visible: ...
QML A.qml加载B.qml文件 A.qml要怎么通知B.qml的自定义函数
05-11
要通知B.qml的自定义函数，可以使用Qt的信号和槽机制。在A.qml中定义一个信号，当需要通知B.qml时，发射该信号，B.qml中连接该信号到其自定义函数即可。 下面是示例代码： A.qml文件中： ``` import QtQuick 2.0 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山间点烟雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值