qml中canvas绘制简单程序流程图简单程序流程图
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible:true
width:640
height:700
title:qsTr("Hello World")
//style 0圆⾓矩形 1矩形 2菱形⾮012的为平⾏四边形
property var padding:20
property var bgc:"#0C283C"
property var fs:30
property var name:""
property var lc:"#ffffff"
property var fc:"#ffffff"
property var strokeColor:"#ffffff"
property var fillColor:"#00BFFF"
property var data1: JSON.stringify([
{
"nextNodeID":"1",
// "lc": "255,0,0",
// "fc": "255,0,0",
"style":"0",
"nodeText":"开\t始",
"nodeID":"0"
},
{
"nextNodeID":"2",
"linetext":"",
// "lc": "255,0,0",
// "fc": "255,0,0",
"style":"4",
"nodeText":"初始数据",
"nodeID":"1"
},
{
"nextNodeID":"3",
"linetext":"否",
// "lc": "255,0,0",
// "fc": "255,0,0",
"style":"2",
"nodeText":"初始数据?",
"nodeID":"2"
},
{
"nextNodeID":"4",
"linetext":"是",
// "lc": "255,0,0",
"style":"2",
"nodeText":"",
"nodeID":"2"
},
{
"nextNodeID":"5",
// "lc": "255,0,0",
/
/ "fc": "255,0,0",
"style":"1",
"nodeText":"初始数据",
"nodeID":"3"
},
{
{
"nextNodeID":"6",
// "lc": "255,0,0",
// "fc": "255,0,0",
"style":"0",
"nodeText":"初始数据",
"nodeID":"4"
},
{
"nextNodeID":"6",
"linetext":"是",
// "lc": "255,0,0",
// "fc": "255,0,0",
"style":"2",
"nodeText":"初始数据",
"nodeID":"5"
},
{
"nextNodeID":"3",
"linetext":"否",
// "lc": "255,0,0",
"style":"2",
"nodeText":"",
"nodeID":"5"
},
{
"nextNodeID":"7",
"linetext":"",
// "lc": "255,0,0",
// "fc": "255,0,0",
"style":"1",
"nodeText":"初始数据",
"nodeID":"6"
},
{
"nextNodeID":"-1",
"linetext":"",
// "lc": "255,0,0",
/
/ "fc": "255,0,0",
"style":"0",
"nodeText":"结\t束",
"nodeID":"7"
}
])
function repeatNum(item,arr){
var count =0;
for(var i=0;i<arr.length;i++){
if(arr[i]==item){
count++
}
}
return count;
}
function colorChange(rgbColor){ // RGB颜⾊值的正则
if(rgbColor==undefined){
return"#ffffff"
}
rgbColor ="rgb("+rgbColor+")"; var reg =/^(rgb|RGB)/;
var color = rgbColor;
st(color)){
var strHex ="#";
// 把RGB的3个数值变成数组
// 把RGB的3个数值变成数组
var colorArr = place(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
// 转成16进制
for(var i =0; i < colorArr.length; i++){
var hex =Number(colorArr[i]).toString(16);
if(hex.length==1){
hex ="0"+hex
}
if(hex ==="0"){
hex += hex;
}
strHex += hex;
}
return strHex;
}else{
return String(color);
}
}
Rectangle{
id:bg
width:1000
height:700
color:"#0C283C"
Canvas{
id:myCanvas
width: parent.width
height: parent.height
anchors.fill: parent
onPaint:{
var ctx =getContext("2d");
ctx.clearRect(0,0,myCanvas.width,myCanvas.height)
//先对json处理分离成主⼲-分⽀-多连线
//存储主⼲节点
var dataJson = JSON.parse(data1)
console.log("canvasjson:",data1)
var gridModel =[];
var norepeatArr =[]
var repeatArr =[]
var repeatNextNodeID =[]
var leftArr =[]
var rightArr =[]
for(var i=0;i<dataJson.length;i++){
if(repeatNum(dataJson[i].nodeID,norepeatArr)==0){
if(repeatNum(dataJson[i].nodeID,repeatNextNodeID)==0){ norepeatArr.push(dataJson[i].nodeID)
gridModel.push(dataJson[i])
}else{
rightArr.push(dataJson[i])
}
}else{
repeatArr.push(dataJson[i])
repeatNextNodeID.push(dataJson[i].nextNodeID)
}
}
for(var i=0;i<repeatArr.length;i++){
if(repeatNum(repeatArr[i].nextNodeID,norepeatArr)!=0){
leftArr.push(repeatArr[i])
}else{
for(var j=0;j<rightArr.length;j++){
if(repeatArr[i].nextNodeID==rightArr[j].nodeID){
if(repeatArr[i].nextNodeID==rightArr[j].nodeID){
rightArr[j].parentID = repeatArr[i].nodeID
rightArr[j].linetext = repeatArr[i].linetext
rightArr[j].plc = repeatArr[i].lc
rightArr[j].pfc = repeatArr[i].fc
}
}
}
}
console.log(JSON.stringify(gridModel))
console.log(JSON.stringify(norepeatArr))
console.log(JSON.stringify(repeatArr))
console.log(JSON.stringify(repeatNextNodeID))
console.log(JSON.stringify(leftArr))
console.log(JSON.stringify(rightArr))
/
/⽂字宽⾼间隔字体⼤⼩左右分⽀距离间隔箭头长度
var w = myCanvas.width/8
var h = myCanvas.height/gridModel.length/2
var interval = myCanvas.height/gridModel.length
var fontpx = h/2
var branchInterval = myCanvas.width/4
var arrowLen = interval/6
//绘制主⼲
for(var i=0;i<gridModel.length;i++){
var val = gridModel[i]
if(val.style ==0){
ctx.beginPath()
drawRadiusRec(ctx,myCanvas.width/2-w/2,i*interval,w,h,deText,fontpx,colorChange(val.fc))
if(NodeID)>0){
drawArrow(ctx,myCanvas.width/2, interval*i+h, myCanvas.width/2,(i+1)*interval,30,arrowLen,2,colorChange(val.lc),"m",val.linetext?val.lin etext:"",fontpx,colorChange(val.fc));
}
ctx.closePath()
}else if(val.style ==1){
ctx.beginPath()
drawRec(ctx,myCanvas.width/2-w/2,i*interval,w,deText,fontpx,colorChange(val.fc))
drawArrow(ctx,myCanvas.width/2, interval*i+h, myCanvas.width/2,(i+1)*interval,30,arrowLen,2,color
Change(val.lc),"m",val.linetext?val.linete xt:"",fontpx,colorChange(val.fc));
ctx.closePath()
}
else if(val.style ==2){
ctx.beginPath()
drawLing(ctx,myCanvas.width/2-w/2,i*interval,w,deText,fontpx,colorChange(val.fc))
drawArrow(ctx,myCanvas.width/2, interval*i+h, myCanvas.width/2,(i+1)*interval,30,arrowLen,2,colorChange(val.lc),"m",val.linetext?val.linete xt:"",fontpx,colorChange(val.fc));
ctx.closePath()
}
else{
ctx.beginPath()
drawSibianxing(ctx,myCanvas.width/2-w/2,i*interval,w,deText,fontpx,colorChange(val.fc))
drawArrow(ctx,myCanvas.width/2, interval*i+h, myCanvas.width/2,(i+1)*interval,30,arrowLen,2,colorChange(val.lc),"m",val.linetext?val.linete xt:"",fontpx,colorChange(val.fc));
ctx.closePath()
}
}
//需要⼀左⼀右显⽰，合并左右数组，间隔添加属性pos为左还是右
var ary1 = JSON.parse(JSON.stringify(leftArr));//深拷贝，否则改变原数组
var ary2 = JSON.parse(JSON.stringify(rightArr));
var ary2 = JSON.parse(JSON.stringify(rightArr));
for(var i =0; i < ary2.length; i++){
ary1.splice(1+2*i,0, ary2[i]);
}
console.log(ary1);
for(var i=0;i<ary1.length;i++){
if(i%2==0){
ary1[i].pos="left";
}else{
ary1[i].pos="right";
}
}
/
/绘制带节点分⽀
for(var n=0;n<rightArr.length;n++){
var pos ="left";
for(var m=0;m<ary1.length;m++){
if(ary1[m].nodeID==rightArr[n].nodeID){
pos = ary1[m].pos
}
}
var posVal = pos =="left"?-1:1;
var rightX = myCanvas.width/2+branchInterval*(n+1)*posVal
//暂定分⽀只能是矩形1 否则再判断是画哪种图形
ctx.beginPath()
//取⽗节点和⼦节点在主⼲的下标，除2取整
var pInd,sInd;
for(var i=0;i<gridModel.length;i++){
if(rightArr[n].parentID==gridModel[i].nodeID){
pInd = i
rightArr[n].parentNodedata = gridModel[i].nodeText
}else if(gridModel[i].nodeID==rightArr[n].nextNodeID){
sInd = i
rightArr[n].sonNodedata = gridModel[i].nodeText
}
}
var midInd =parseInt((parseFloat(pInd)+parseFloat(sInd))/2)
//通过rightarr的下标，更改下y，实现同侧避让
typeof array//绘制右分⽀上箭头
var pX =[rightX+w/2*posVal]
var pY =[interval*pInd+h/2]
//解决因为节点图形因为⽂字⾃适应宽度导致箭头起点不对
var fromX = myCanvas.width/2+w/2*posVal
rightArr[n].parentNodedata = rightArr[n].place("\t"," ")
if(getTextLen(rightArr[n].parentNodedata,fontpx)+80>w){
fromX = fromX+(getTextLen(rightArr[n].parentNodedata,fontpx)+80-w)/2*posVal
}
//参数说明：canvas对象，起点x，起点y，终点x，终点y，箭头⾓度，箭头长度，线宽，颜⾊，节点位置，线⽂字，拐点个数，拐点x（array），拐点y（array）
drawArrow(ctx,fromX, interval*pInd+h-h/2,rightX+w/2*posVal,interval*midInd,30,arrowLen,2,colorChange(rightArr[n].plc),"r",rightArr[n].linete xt,fontpx,colorChange(rightArr[n].pfc),1,pX,pY);
//绘制右分⽀下箭头
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论