开发者社区> 狐狸家的鱼> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

QML学习笔记(四)-Canva画板画图功能-跟随鼠标位置进行随笔画

简介: 参考博主文章进行整理了代码,实现功能参考:https://blog.csdn.net/UbuntuTouch/article/details/46375697 源码:https://github.com/sueRimn/QML-ExampleDemos 更多的鼠标实时画图-画直线画圆画矩形等看下...
+关注继续查看

参考博主文章进行整理了代码,实现功能参考:https://blog.csdn.net/UbuntuTouch/article/details/46375697

源码:https://github.com/sueRimn/QML-ExampleDemos

更多的鼠标实时画图-画直线画圆画矩形等看下一篇博文:《QML-纯qml画图-实现canvas画板功能

录制软件没有录入鼠标,实现如下图:

 

1.组件ColorSquare.qml

该组件主要是颜色提取块,完整代码如下:

import QtQuick 2.0

Rectangle {
    id: colorSquare;
    width: 48; height: 48
    color: "green"
    signal clicked
    property bool active: false
    border.color: active? "#666666" : "#f0f0f0"
    border.width: 2

    MouseArea {
        id: area
        anchors.fill :parent
        onClicked: {
            colorSquare.clicked()
        }

    }
}

设置了该组件激活状态为false,边框颜色在点击激活状态下颜色为“#666”,就是该颜色提取块被选中时边框颜色改变

2.main.qml

主文件是执行画笔功能和颜色选取,我给添加了注释,原博主的引入文件我不知道如何在cpp中注册的,所以进行了整改,完整代码如下:

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window{
    id: root
    width: 640
    height: 480
    visible: true

    Row{
        id:colorTools//颜色提取工具
        anchors{
            horizontalCenter: parent.horizontalCenter
            top: parent.top
            topMargin: 8

        }
        property color paintColor: "#33b5e5"//设置初始画笔颜色
        spacing: 4;
        Repeater{//四个colorSquare
            model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]//modelData 颜色数据
            ColorSquare{
                id:red;
                color: modelData;
                active: parent.paintColor == color//当选中一个colorSquare时,当前画笔颜色为选中的颜色
                onClicked: {
                    parent.paintColor = color
                }

            }
        }
    }
    Rectangle{
        anchors.fill: canvas
        border.color: "#666"
        border.width: 4;
    }
    Canvas{
        id:canvas;
        anchors{
            left: parent.left;
            right:parent.right;
            top:colorTools.bottom;
            bottom: parent.bottom;
            margins: 8
        }
      //鼠标点击坐标位置 property real lastX property real lastY property color color: colorTools.paintColor onPaint: {
var ctx = getContext("2d") ctx.lineWidtn = 5 ctx.strokeStyle = canvas.color; ctx.beginPath() ctx.moveTo(lastX,lastY) lastX = area.mouseX; lastY = area.mouseY; ctx.lineTo(lastX,lastY) ctx.stroke() } MouseArea{ id:area; anchors.fill: parent; onPressed: { canvas.lastX = mouseX; canvas.lastY = mouseY; } onPositionChanged: { canvas.requestPaint()//当鼠标press位置改变 完成当前绘制 } } } }//Window

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JAVA鼠标屏幕绘制拖拽删除矩形
JAVA鼠标屏幕绘制拖拽删除矩形
0 0
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
关于 Qt图形视图框架自绘图元放到左边和上边之外,部分在内进行拉伸后,拉伸多余的区域无法碰撞 的解决方法
0 0
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
0 0
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
Qt实用技巧:图形视图框架中图元将矩形边界改为不规则边界(用于选取和碰撞)
0 0
C#(三十五)之在滚动窗口中绘图
窗体中的三个属性: Size:窗体大小(包括标题栏和边框) ClientSize:工作区大小(不包括标题栏和边框) AutoScrollMinSize:出现滚动条的最小尺寸
0 0
推荐一个免费的屏幕取色器,鼠标放到的位置自动显示RGB
推荐一个免费的屏幕取色器,鼠标放到的位置自动显示RGB
0 0
Unity物体移动到点击位置
Camera 在正交模式下可以实现点击哪里就将物体移动到哪里。 public Vector3 tempPos; void Update() { if (Input.GetMouseButtonDown(0)) { tempPos = Input.mousePosition; tempPos = Camera.main.ScreenToWorldPoint(tempPos); tempPos.z = 0; transform.position = tempPos; } } Camera 在透视模式下可以实现点击哪里就将物体移动到哪里。
1773 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载