注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

沙漠里de烟雨

原创分享,禁止转载

 
 
 

日志

 
 

qml 连续画线  

2017-05-11 03:03:34|  分类: QT5.x与QML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
xx.pro:
QT += qml quick

main.cpp =>
#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml =>
import QtQuick 2.3
import QtQuick.Window 2.2

Window
{
    id:window
    visible: true

    width: 800
    height:600

    property bool clearAll:false

    Row
    {
        id: colorTools
        spacing: 5
        anchors
        {
            horizontalCenter: parent.horizontalCenter
            top:parent.top
            topMargin:8
        }

        property color paintColor : "black"

        Repeater
        {
            model:["red","green","blue","black"]
            ColorInk
            {
                id:ink
                color:modelData
                active:colorTools.paintColor == color
                onClicked:
                {
                    window.clearAll = false
                    colorTools.paintColor = color
                }
            }
        }

        Rectangle
        {
            id:clearId
            width:50
            height:48
            border.color: "#666666"
            border.width: 2
            MouseArea
            {
                anchors.fill: parent
                onClicked:
                {
                    window.clearAll = true
                    canvas.requestPaint()
                }
            }
        }
    }


    Rectangle
    {
        id:rect
        anchors.fill: canvas
        border.color: "#666666"
        border.width: 4
        width:parent.width
        height:parent.height
    }

    Canvas
    {
        id: canvas

        anchors
        {
            left: parent.left
            right:parent.right
            top:colorTools.bottom
            bottom:parent.bottom
        }

        property real lastX
        property real lastY
        property color clr: colorTools.paintColor

        onPaint:
        {
            var ctx = getContext('2d')

            if(!window.clearAll)
            {
                ctx.strokeStyle = canvas.clr
                ctx.lineWidth = 5.0
                ctx.beginPath()
                ctx.moveTo(lastX,lastY)
                lastX = area.mouseX
                lastY = area.mouseY
                ctx.lineTo(lastX,lastY)
                ctx.stroke()
            }
            else
            {
                ctx.fillStyle = "#ffffff"
                ctx.fillRect(2,2,canvas.width-4,canvas.height-4);
               // ctx.fill()
                window.clearAll = false
            }
        }

        MouseArea
        {
            id: area
            anchors.fill: parent
            onPressed:
            {
                canvas.lastX = mouseX
                canvas.lastY = mouseY
            }
            onPositionChanged:
            {
                canvas.requestPaint()
            }
        }
    }

}

ColorInk.qml =>
import QtQuick 2.0

Rectangle
{
    id:root
    width:50
    height:50
    color:"green"

    property bool active: false

    signal clicked

    border.color: active ? "#666666" : "#f0f0f0"
    border.width: 2

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

  评论这张
 
阅读(6)| 评论(0)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017