QML Canvas画箭头

最新推荐文章于 2025-05-03 19:15:06 发布
最新推荐文章于 2025-05-03 19:15:06 发布
阅读量940 收藏 3
点赞数
分类专栏： QML 学习 文章标签： qt ui c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42252757/article/details/127244193
版权
本文介绍了一个使用Qt Quick进行图形界面开发的例子，展示了如何通过鼠标操作调整矩形选框的大小和位置，并在两个矩形之间绘制箭头指示关联。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

import QtQml 2.14
import QtQuick 2.15

Rectangle{
    id:root
    color:"red"
    property bool isSelFirstRect: true
    Image {
        id: background
        anchors{
            fill:parent
        }
        source: "qrc:/image/background.jpeg"
    }

    onIsSelFirstRectChanged: {
        canvas.requestPaint()
    }

    Rectangle{
        id:firstRect
        x:100
        y:100
        width: 200
        height: 200
        color: "transparent"
        border.width: 2
        border.color: root.isSelFirstRect?"green":"#FFFFFF"
        onWidthChanged: {
            canvas.requestPaint()
        }
        onHeightChanged: {
            canvas.requestPaint()
        }
        onXChanged: {
            canvas.requestPaint()

        }
        onYChanged: {
            canvas.requestPaint()
        }
        //左上
        Rectangle{
            visible:  root.isSelFirstRect
            width: 20
            height: 6
            anchors{
                left: parent.left
                top: parent.top
            }
            color: "green"
        }
        Rectangle{
            visible: root.isSelFirstRect
            width: 6
            height: 20
            anchors{
                left: parent.left
                top: parent.top
            }
            color: "green"
        }
        Rectangle{
            visible:  root.isSelFirstRect
            width: 6
            height: 6
            anchors{
                left: parent.left
                top: parent.top
            }
            color: "green"
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.SizeFDiagCursor
                property var  clickPt: Qt.point(0,0)
                property bool  isPressed: false
                onPressed: {
                    clickPt=Qt.point(mouseX,mouseY)
                    isPressed=true
                }

                onMouseXChanged: {
                    var dealt=Qt.point(mouseX-clickPt.x,mouseY-clickPt.y)
                    if(isPressed&&firstRect.width-dealt.x>40&&firstRect.height-dealt.y>40){

                        // clickPt=Qt.point(mouseX,mouseY)
                        firstRect.x=firstRect.x+dealt.x
                        firstRect.y=firstRect.y+dealt.y

                        firstRect.width-=dealt.x
                        firstRect.height-=dealt.y


                    }
                }


                onReleased: {
                    isPressed=false

                }
            }
            z:3
        }
        //右下
        Rectangle{
            visible:  root.isSelFirstRect
            width: 20
            height: 6
            anchors{
                right: parent.right
                bottom:  parent.bottom
            }
            color: "green"
        }
        Rectangle{
            visible:  root.isSelFirstRect
            width: 6
            height: 20
            anchors{
                right: parent.right
                bottom:  parent.bottom
            }
            color: "green"
        }
        Rectangle{
            visible:  root.isSelFirstRect
            width: 6
            height: 6
            anchors{
                right: parent.right
                bottom:  parent.bottom
            }
            color: "green"
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.SizeFDiagCursor
                property var  clickPt: Qt.point(0,0)
                property bool  isPressed: false
                onPressed: {
                    clickPt=Qt.point(mouseX,mouseY)
                    isPressed=true
                }

                onMouseXChanged: {
                    var dealt=Qt.point(mouseX-clickPt.x,mouseY-clickPt.y)
                    if(isPressed&&firstRect.width+dealt.x>40&&firstRect.height+dealt.y>40){



                        firstRect.width+=dealt.x
                        firstRect.height+=dealt.y


                    }
                }


                onReleased: {
                    isPressed=false

                }
            }
            z:3
        }

        //右上
        Rectangle{
            visible:  root.isSelFirstRect
            width: 20
            height: 6
            anchors{
                right: parent.right
                top:  parent.top
            }
            color: "green"
        }
        Rectangle{
            visible: root.isSelFirstRect
            width: 6
            height: 20
            anchors{
                right: parent.right
                top:  parent.top
            }
            color: "green"
        }
        Rectangle{
            visible: root.isSelFirstRect
            width: 6
            height: 6
            anchors{
                right: parent.right
                top:  parent.top
            }
            color: "green"
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.SizeBDiagCursor
                property var  clickPt: Qt.point(0,0)
                property bool  isPressed: false
                onPressed: {
                    clickPt=Qt.point(mouseX,mouseY)
                    isPressed=true
                }

                onPositionChanged: {
                    var dealt=Qt.point(mouseX-clickPt.x,mouseY-clickPt.y)
                    if(isPressed&&firstRect.width+dealt.x>40&&firstRect.height-dealt.y>40){

                        //  clickPt=Qt.point(mouseX,mouseY)
                        firstRect.y=firstRect.y+dealt.y
                        firstRect.width+=dealt.x
                        firstRect.height-=dealt.y


                    }
                }


                onReleased: {
                    isPressed=false

                }

            }
            z:3
        }

        //左下
        Rectangle{
            visible: root.isSelFirstRect
            width: 20
            height: 6
            anchors{
                left: parent.left
                bottom:  parent.bottom
            }
            color: "green"
        }
        Rectangle{
            visible: root.isSelFirstRect
            width: 6
            height: 20
            anchors{
                left: parent.left
                bottom:  parent.bottom
            }
            color: "green"
        }
        Rectangle{
            visible: root.isSelFirstRect
            width: 6
            height: 6
            anchors{
                left: parent.left
                bottom:  parent.bottom
            }
            color: "green"
            MouseArea{
                anchors.fill: parent

                enabled: true
                hoverEnabled: true
                cursorShape:Qt.SizeBDiagCursor
                property var  clickPt: Qt.point(0,0)
                property bool  isPressed: false
                onPressed: {
                    clickPt=Qt.point(mouseX,mouseY)
                    isPressed=true
                }

                onMouseXChanged: {
                    var dealt=Qt.point(mouseX-clickPt.x,mouseY-clickPt.y)
                    if(isPressed&&firstRect.width-dealt.x>40&&firstRect.height+dealt.y>40){


                        firstRect.x=firstRect.x+dealt.x
                        firstRect.width-=dealt.x
                        firstRect.height+=dealt.y


                    }
                }


                onReleased: {
                    isPressed=false

                }
            }
            z:3
        }
        Rectangle{
            visible: root.isSelFirstRect
            width: 20
            height: 2
            color: "green"
            anchors.centerIn: parent
        }

        Rectangle{

            visible: root.isSelFirstRect
            width: 2
            height: 20
            color: "green"
            anchors.centerIn: parent
        }
        MouseArea{
            anchors.fill: parent
            //  hoverEnabled: true

            onPressed: {
                if(mouse.button==Qt.LeftButton){
                    root.isSelFirstRect=true

                }
            }

            drag.target: firstRect
            drag.axis: Drag.XAndYAxis

        }


    }



    Rectangle{
        id:secondRect
        x:500
        y:500
        width: 200
        height: 200
        color: "transparent"
        border.width: 2
        border.color: !root.isSelFirstRect?"green":"#FFFFFF"
        onWidthChanged: {
            canvas.requestPaint()
        }
        onHeightChanged: {
            canvas.requestPaint()
        }
        onXChanged: {
            canvas.requestPaint()

        }
        onYChanged: {
            canvas.requestPaint()
        }
        //左上
        Rectangle{
            visible:  !root.isSelFirstRect
            width: 20
            height: 6
            anchors{
                left: parent.left
                top: parent.top
            }
            color: "green"
        }
        Rectangle{
            visible: !root.isSelFirstRect
            width: 6
            height: 20
            anchors{
                left: parent.left
                top: parent.top
            }
            color: "green"
        }
        Rectangle{
            visible:  !root.isSelFirstRect
            width: 6
            height: 6
            anchors{
                left: parent.left
                top: parent.top
            }
            color: "green"
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.SizeFDiagCursor
                property var  clickPt: Qt.point(0,0)
                property bool  isPressed: false
                onPressed: {
                    clickPt=Qt.point(mouseX,mouseY)
                    isPressed=true
                }

                onMouseXChanged: {
                    var dealt=Qt.point(mouseX-clickPt.x,mouseY-clickPt.y)

                    if(isPressed&&secondRect.width-dealt.x>40&&secondRect.height-dealt.y>40){
                        secondRect.x=secondRect.x+dealt.x
                        secondRect.y=secondRect.y+dealt.y
                        secondRect.width-=dealt.x
                        secondRect.height-=dealt.y


                    }
                }


                onReleased: {
                    isPressed=false

                }
            }
            z:3
        }
        //右下
        Rectangle{
            visible:  !root.isSelFirstRect
            width: 20
            height: 6
            anchors{
                right: parent.right
                bottom:  parent.bottom
            }
            color: "green"
        }
        Rectangle{
            visible:  !root.isSelFirstRect
            width: 6
            height: 20
            anchors{
                right: parent.right
                bottom:  parent.bottom
            }
            color: "green"
        }
        Rectangle{
            visible:  !root.isSelFirstRect
            width: 6
            height: 6
            anchors{
                right: parent.right
                bottom:  parent.bottom
            }
            color: "green"
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.SizeFDiagCursor
                property var  clickPt: Qt.point(0,0)
                property bool  isPressed: false
                onPressed: {
                    clickPt=Qt.point(mouseX,mouseY)
                    isPressed=true
                }

                onMouseXChanged: {
                    var dealt=Qt.point(mouseX-clickPt.x,mouseY-clickPt.y)
                    if(isPressed&&secondRect.width+dealt.x>40&&secondRect.height+dealt.y>40){

                        //   clickPt=Qt.point(mouseX,mouseY)

                        secondRect.width+=dealt.x
                        secondRect.height+=dealt.y


                    }
                }


                onReleased: {
                    isPressed=false

                }
            }
            z:3
        }

        //右上
        Rectangle{
            visible:  !root.isSelFirstRect
            width: 20
            height: 6
            anchors{
                right: parent.right
                top:  parent.top
            }
            color: "green"
        }
        Rectangle{
            visible: !root.isSelFirstRect
            width: 6
            height: 20
            anchors{
                right: parent.right
                top:  parent.top
            }
            color: "green"
        }
        Rectangle{
            visible: !root.isSelFirstRect
            width: 6
            height: 6
            anchors{
                right: parent.right
                top:  parent.top
            }
            color: "green"
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                cursorShape:Qt.SizeBDiagCursor
                property var  clickPt: Qt.point(0,0)
                property bool  isPressed: false
                onPressed: {
                    clickPt=Qt.point(mouseX,mouseY)
                    isPressed=true
                }

                onMouseXChanged: {
                    var dealt=Qt.point(mouseX-clickPt.x,mouseY-clickPt.y)
                    if(isPressed&&secondRect.width+dealt.x>40&&secondRect.height-dealt.y>40){

                        // clickPt=Qt.point(mouseX,mouseY)
                        secondRect.y=secondRect.y+dealt.y
                        secondRect.width+=dealt.x
                        secondRect.height-=dealt.y


                    }
                }


                onReleased: {
                    isPressed=false

                }

            }
            z:3
        }

        //左下
        Rectangle{
            visible: !root.isSelFirstRect
            width: 20
            height: 6
            anchors{
                left: parent.left
                bottom:  parent.bottom
            }
            color: "green"
        }
        Rectangle{
            visible: !root.isSelFirstRect
            width: 6
            height: 20
            anchors{
                left: parent.left
                bottom:  parent.bottom
            }
            color: "green"
        }
        Rectangle{
            visible: !root.isSelFirstRect
            width: 6
            height: 6
            anchors{
                left: parent.left
                bottom:  parent.bottom
            }
            color: "green"
            MouseArea{
                anchors.fill: parent

                enabled: true
                hoverEnabled: true
                cursorShape:Qt.SizeBDiagCursor
                property var  clickPt: Qt.point(0,0)
                property bool  isPressed: false
                onPressed: {
                    clickPt=Qt.point(mouseX,mouseY)
                    isPressed=true
                }

                onMouseXChanged: {
                    var dealt=Qt.point(mouseX-clickPt.x,mouseY-clickPt.y)
                    if(isPressed&&secondRect.width-dealt.x>40&&secondRect.height+dealt.y>40){


                        secondRect.x=secondRect.x+dealt.x
                        secondRect.width-=dealt.x
                        secondRect.height+=dealt.y


                    }
                }


                onReleased: {
                    isPressed=false

                }
            }
            z:3
        }


        Rectangle{
            visible: !root.isSelFirstRect
            width: 20
            height: 2
            color: "green"
            anchors.centerIn: parent
        }

        Rectangle{
            visible: !root.isSelFirstRect
            width: 2
            height: 20
            color: "green"
            anchors.centerIn: parent
        }
        MouseArea{
            anchors.fill: parent
            onPressed: {
                root.isSelFirstRect=false
            }

            drag.target: secondRect
            drag.axis: Drag.XAndYAxis
        }
    }



    Rectangle {
        id:topRect
        anchors{
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: root.isSelFirstRect?firstRect.top:secondRect.top
        }
        z:2
        opacity: 0.5
        color: "black"
    }

    Rectangle {
        id:bottomRect
        anchors{
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            top: root.isSelFirstRect?firstRect.bottom:secondRect.bottom
        }
        z:2
        opacity: 0.5
        color: "black"
    }
    Rectangle {
        id:leftRect
        anchors{
            left: parent.left
            right: root.isSelFirstRect?firstRect.left:secondRect.left
            bottom: bottomRect.top
            top: topRect.bottom
        }
        z:2
        opacity: 0.5
        color: "black"
    }
    Rectangle {
        id:rightRect
        anchors{
            left:  root.isSelFirstRect?firstRect.right:secondRect.right
            right:parent.right
            bottom: bottomRect.top
            top: topRect.bottom
        }
        z:2
        opacity: 0.5
        color: "black"
    }

    Canvas{
        id:canvas
        contextType: "2d"
        antialiasing: true

        anchors{
            fill:parent
        }
        function arrow(context, fromx, fromy, tox, toy) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const headlen = Math.sqrt(dx * dx + dy * dy) * 0.05; // length of head in pixels
            const angle = Math.atan2(dy, dx);

            context.beginPath();
            context.moveTo(fromx,fromy)
            context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6)*0.5, toy - headlen * Math.sin(angle - Math.PI / 6)*0.5)
            context.lineTo(tox,toy)
            context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6)*0.5, toy - headlen * Math.sin(angle + Math.PI / 6)*0.5)
            context.stroke();
            context.fill()

            context.beginPath();
            context.moveTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            context.lineTo(tox, toy );
            context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            context.stroke();
            context.fill()

        }
        onPaint: {
            var context=getContext("2d")
            context.clearRect(0,0,width,height)
            context.lineWidth = 1
            context.strokeStyle = "#75FA61"
            context.fillStyle = "#75FA61"
            var fromPt=root.isSelFirstRect?Qt.point(firstRect.x+firstRect.width/2,firstRect.y+firstRect.height/2):Qt.point(secondRect.x+secondRect.width/2,secondRect.y+secondRect.height/2)
            var toPt=root.isSelFirstRect?Qt.point(secondRect.x+secondRect.width/2,secondRect.y+secondRect.height/2):Qt.point(firstRect.x+firstRect.width/2,firstRect.y+firstRect.height/2)
            arrow(context,toPt.x,toPt.y,fromPt.x,fromPt.y)

        }
        z: 2

    }

}

相关文档参考文档
Canvas学习：绘制箭头
在这里插入图片描述
在这里插入图片描述

QML Canvas 裁剪
青春不老，奋斗不止！
06-30 892
在 QML 开发中，Canvas 是一个很强大的绘图元素，可以实现各种复杂的图形效果，其中一个重要的特性就是裁剪。它的原理是使用路径或其他形状定义一个封闭区域，将绘图操作限制在该区域内，并隐藏掉超出该区域的部分。
31. QML仿制思维导图系列02 -- 绘制初始三角形
山间点烟雨
05-11 681
大致思路就是在产生节点时，要首先在节点的右侧绘制一个三角形，此三角形为起初的三角形，并在这个三角形上面设置一个鼠标控制区域，当拖动这个区域时，让画布重新绘制，此时重新绘制的内容要包括根部的小三角形，连接线（三次曲线）和线顶端的小箭头。经过第一步之后，每次产生的新节点都会在其右侧绘制一个小三角形，但是在窗口中中拖动节点时会发现绘制的三角形并不能跟随节点一块移动，这是因为绘制三角形所需要的坐标点未随着节点移动而发生变化。很关键，否则将出现非常奇怪的现象，读者可以将代码注释掉尝试一下！思维导图第一版最终效果。
基于QT QML的动态旋转箭头
06-08
基于QT QML的动态旋转箭头，采用QML的方式实现的。。。
Qt qml canvas 绘制任意角度的箭头
jqxkasang的博客
10-14 794
做个笔记，在canvas上绘制任意角度的箭头，琢磨了好久，其实挺简单的。 BC和BD是箭头，算出AB和CD的交点O坐标,OC 和OB设的固定值。 箭头效果：
简介QML中的Canvas
最新发布
m0_61629312的博客
05-03 374
QML中的Canvas是一个强大的绘图组件，允许开发者通过JavaScript在界面上进行动态的2D图形绘制。• 支持绘制基本图形（矩形、圆形、线条等）、文本、图像，以及像素级操作。元素，适用于实现自定义图形、动画、游戏开发以及图表绘制等场景。• 性能优化：分块渲染（瓷片系统）可提升大画布性能。）、样式控制（颜色、渐变、阴影）和合成效果。方法触发重绘，结合定时器可实现动画效果。监听用户输入，实现绘图板等交互应用。• 默认透明背景，需手动设置填充色。• 复杂动画建议使用硬件加速（如。• 提供路径操作（如。
Qml旋转箭头
zhengtianzuo的博客
10-18 1118
一个向右的箭头, 点击顺时针旋转90°, 再次点击逆时针旋转90°Image { id: image height: 24 width: 24 anchors.centerIn: parent source: "qrc:/image.png" MouseArea{ anchors.f
QmlRotationAnimationQml旋转箭头.7z
07-20
QmlRotationAnimationQml旋转箭头.7z
qml canvas箭头
03-29
好的，我需要回答用户关于如何在QML Canvas中绘制箭头的问题。首先，用户提到了引用[1]中的圆形头像示例，使用clip()方法和绘制图像。我应该参考这个例子，并考虑如何应用到箭头的绘制上。 首先，箭头通常由线条和...
Qml旋转箭头动画效果教程与实践
QML还提供了与其他Qt技术的集成，比如QML可以使用Qt Quick框架中的Canvas元素来绘制自定义的矢量图形，或者使用Qt的C++后端来处理复杂的数据和逻辑。通过这些功能，开发者可以将QmlRotationAnimation与其他元素结合...
Qt5 qml 各种功能事例，详细功能见资源描述
10-16
QmlCanvasText: QmlCanvas文字 QmlKey: Qml全局按键 QmlLoader: QmlLoader QmlInvertedImage: Qml倒影 QmlFontAwesome: Qml使用FontAwesome QmlListSlidDelete: Qml滑动删除 QmlCircularProgressButton: Qml圆形进度...
canvas画箭头
07-18
canvas画箭头例子。希望对你有用。
QT实现带箭头的Step 菜单
04-11
很多分类信息网站用step menu菜单来提示用户按步骤输入。如58同城的广告,这里在QT里用一个简单办法来实现这种效果
QML编写透明带箭头矩形框
weixin_42252757的博客
10-10 583
qml 透明窗口demo
Qt画箭头
TemetNosce的博客
09-12 4350
画箭头
Qt绘制带箭头的线段
热门推荐
super_rat的专栏
08-06 1万+
float x1 = lastPoint.x();         //lastPoint 起点 float y1 = lastPoint.y(); float x2 = endPoint.x();           //endPoint 终点 float y2 = endPoint.y(); float l = 10.0;                   //箭头的那长度 flo
QML图学习
编程猴
01-04 371
类之间的关系（按使用频率排序） 泛化关系(继承关系)：泛化关系用带空心三角箭头的实线来表示，箭头从子类指向父类。 实现关系(接口与实现类关系):实现关系使用带空心三角箭头的虚线来表示，箭头从实现类指向接口。 ________________________________________________ 依赖关系：依赖关系使用带箭头的虚线来表示，箭头从使用类指向被依赖的类。 聚合关系：...
canvas绘图学习: 绘制箭头
m0_52912501的博客
03-22 2196
在canvas绘图的过程中有时我们需要绘制箭头，但canvas本身没有绘制箭头的方法，于是就需要我们自己来封装。本文章就介绍一下我是如何封装绘制箭头的方法的。
翻译：在HTML5 Canvas 当中绘制带有箭头的直线和圆弧
m0_52912501的博客
03-18 583
在本教程中我们将介绍如何在任意角度的直线上添加箭头，然后运用我们学到的知识实现在弧线的末端添加箭头
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值