点阵编辑器

lxdlbs371

版权声明

---

该文章原创于Qter开源社区（www.qter.org），作者lxdlbs371，转载请注明出处！

首先，该软件并不完善，中间因需求打断了。所以只写了删除操作，其他操作还没有添加，看明白的朋友有空可以添加。


一：程序截图：
（1） 输入字母和数字，以点阵形式显示，有光标。



（2） 移动光标，删除其中的字（现在只能删除，其他操作没有写，程序中已经提供了API）



二：软件分析：
（1） 架构分析




（2）图元分析





（三）代码概略
（1）逻辑层：一些重要的数据结构

1. //矩阵方位数据结构  
   
2. QPoint m_MatrixPoint; //x 为行号，y为列号　从０行０列开始  
   
3. //! 控制全局所有图元的区域  
   
4. QList < QList<QRect> >m_Matrix;  
   
5. //! 记录光标所有的位置，主要是为了根据当前光标返回所在的行号和列号  
   
6. QList < QList<QPoint> > m_cursorMatrix;  
   
7. //! 记录该图元是否是可以改变，x：行号 y:列号  
   
8. QList < QPoint > m_changeAreaList;  
   
9.    
   
10. QRect m_deleteArea; //删除区域，根据当前光标找到前一个位置，然后返回该区域  
    
11. QRect m_insertArea; //插入区域：根据当前光标进行插入的区域，和m_rowEndArea共用  
    
12. QRect m_EnterArea; //换行区域：每次都到下一行的起始断，并且修改矩阵，和m_rowListArea共用  
    
13. QRect m_rowEndArea; //当前行某一列到该行行末的区域  
    
14. QRect m_rowListArea; //换行前，下一行到末尾所有的区域  
    
15. QList<QRect> m_rowAreaList;

复制代码

（2）数据层：比较简单，就是实际画布

1. void DataImage::setImage(QImage dataImage)  
   
2. {  
   
3.          this->m_dataImage = dataImage;  
   
4.          this->update();  
   
5. }

复制代码

（3）背景层: 代码里是视图层，但逻辑上我把它分成背景，主要是画光标和网格

1. /*! ******************************************
   
2. *  视图层：从数据image获取数据后，根据其像素点分别画在视图上
   
3. *******************************************/
   
4. /*!
   
5.   * 画面大小
   
6.   */
   
7. void EditScene::initSize(QGraphicsView *view, int iWidth, int iHeight )
   
8. {
   
9.     this->initColor();
   
10.     this->m_iCustXCnt = iWidth;
    
11.     this->m_iCustYCnt = iHeight;
    
12.     this->m_dataImage = QImage( iWidth, iHeight , QImage::Format_Mono );
    
13. 
    
14.     this->m_dataImage.fill( m_backColor.rgb() );
    
15. 
    
16.     this->m_iSize = view->size().height()/this->m_iCustYCnt;
    
17. //    view->setGeometry( view->geometry().x(), view->geometry().y(),
    
18. //                       WIDTH, HEIGHT*m_iSize +SPACE);
    
19. 
    
20.     this->setSceneRect(0, 0, iWidth*m_iSize, iHeight*m_iSize);
    
21.     qDebug() << m_iCustXCnt*m_iSize<< m_iCustYCnt*m_iSize <<__FILE__<<__LINE__;
    
22.     m_backImage =  QImage( m_iCustXCnt*m_iSize, m_iCustYCnt*m_iSize, QImage::Format_Mono );
    
23.     m_backImage.fill( m_backColor.rgb() );
    
24. }
    
25. 
    
26. 
    
27. /*!
    
28.   * 初始化颜色
    
29.   */
    
30. void EditScene::initColor()
    
31. {
    
32.     m_backLineColor  = Qt::darkYellow;     //网格颜色
    
33.     m_pointColor = Qt::black;             //画圆
    
34.     m_backColor  = Qt::white;             //背景白色
    
35. }
    
36. 
    
37. /*!
    
38.   * 画网格
    
39.   */
    
40. void EditScene::setGrid(bool enable)
    
41. {
    
42. 
    
43.     qDebug()  << m_iSize << m_iCustXCnt<< m_iCustYCnt <<this->height()<< this->width()
    
44.             <<m_iCustXCnt*m_iSize<<m_iCustYCnt*m_iSize<<__FILE__<<__LINE__;
    
45.     QPainter painter( &m_backImage );
    
46. 
    
47.     if ( enable ) {
    
48.         QPen pen(this->m_backLineColor, 0); //虚线的颜色
    
49.         pen.setStyle( Qt::DotLine);  //虚线的类型
    
50.         painter.setPen( pen );
    
51. 
    
52.         for( int i = 1; i < this->m_iCustXCnt; ++i ) {
    
53.             int x = m_iSize*i;
    
54.             painter.drawLine( x, 0, x, this->height() );
    
55.         }
    
56. 
    
57.         for ( int j = 1; j < this->m_iCustYCnt; ++j ) {
    
58.             int y = m_iSize*j;
    
59.             painter.drawLine(0, y, this->width(), y );
    
60.         }
    
61.     }
    
62. m_backImage.save("/home/lbs/1.bmp");
    
63.     this->setBackgroundBrush( this->m_backImage );
    
64. 
    
65. }

复制代码

（4）视图层：根据像素画点

1. /*!
   
2. *判断是否画点
   
3. */
   
4. bool EditScene::isDrawPoint( int icustx,int icusty )
   
5. {
   
6.     //int gray = DataImage.pixel( QPoint(icustx,icusty) );
   
7.     int gray = qGray( this->m_dataImage.pixel(QPoint(icustx,icusty)) );
   
8. 
   
9.     if( gray == 0 ){
   
10.         return true;
    
11.     }else{
    
12.         return false;
    
13.     }
    
14. }
    
15. 
    
16. /*!
    
17.   * 清除某点
    
18.   */
    
19. void EditScene::ClearPoint( int icustx, int icusty )
    
20. {
    
21.     QPainter painter( &m_backImage );
    
22. 
    
23.     painter.setPen( QPen( Qt::transparent, 0 ) );
    
24.     painter.setBrush( QBrush( m_backColor, Qt::SolidPattern ) );
    
25.     painter.drawRect( icustx*m_iSize+1, icusty*m_iSize+1 , m_iSize-2, m_iSize-2 );
    
26.     this->setBackgroundBrush( m_backImage );
    
27. 
    
28.     ClearDataImagePoint( icustx, icusty );
    
29. }
    
30. 
    
31. /*!
    
32.   * 清除数据图像上的某点
    
33.   */
    
34. void EditScene::ClearDataImagePoint( int icustx ,int icusty )
    
35. {
    
36.     this->m_dataImage.setPixel( icustx, icusty , 1 );
    
37. }

复制代码

（5）动作事件：接受键盘动作

1. /*! ******************************************
   
2. * 事件层：接收命令，下发动作
   
3. *******************************************/  
   
4. void EditScene::keyPressEvent(QKeyEvent *event)  
   
5. {  
   
6. switch( event->key() ) {  
   
7. //操作  
   
8. case Qt::Key_Up:  
   
9. emit this->sendCursorMove( Location::Up);  
   
10. break;  
    
11. 。。。。。。。。。  
    
12. }  
    
13. /*!
    
14. * 插入操作
    
15.   */
    
16. void EditScene::insertOpeSlot()
    
17. {
    
18.     emit
    
19. this->sendCursorMove( Location::Insert );
    
20. }
    
21. 
    
22. /*!
    
23.   *
    
24. 根据按键输入不一样的字符
    
25.   */
    
26. void EditScene::setKeyText(QString minStr,
    
27. QString maxStr)
    
28. {
    
29.     QString sendStr;
    
30.     if (
    
31. this->m_capsEnabel ) {
    
32.     //! 大写数据
    
33.       sendStr = maxStr;
    
34. 
    
35.     }else {
    
36.     //!  小写数据
    
37.        sendStr =  minStr;
    
38.     }
    
39.   
    
40.   emit this->sendText( sendStr );
    
41. 
    
42. }
    
43. 
    
44. /*!
    
45.   * 重绘
    
46.   
    
47. */
    
48. void EditScene::Redraw(QRect sourceArea ,QPoint newTopLeft)
    
49. {
    
50. 
    
51. 
    
52.     qDebug() <<sourceArea<<
    
53. newTopLeft<<__FILE__<<__LINE__;
    
54.     QImage m_oldImage =
    
55. m_dataImage.copy( sourceArea );
    
56.     this->cleanRect( sourceArea );
    
57. 
    
58.     m_cursorTopLeft = newTopLeft;
    
59. 
    
60.     //画点
    
61.     if(
    
62. !m_oldImage.isNull() ){
    
63.         for( int i = 0; i <
    
64. m_oldImage.height(); ++i ){
    
65.             for ( int j = 0; j <
    
66. m_oldImage.width(); ++j ){
    
67.                 int gray = qGray(
    
68. m_oldImage.pixel( QPoint(j,i) ) );
    
69.                 if( gray == 0 ){
    
70. 
    
71.                     //! 要加入 光标的位置 m_cursorTopLeft
    
72.                   
    
73. DrawPoint(  m_cursorTopLeft.x()+ j,m_cursorTopLeft.y()+ i );
    
74.       
    
75.          }
    
76.             }
    
77.         }
    
78.     }
    
79.    
    
80. this->m_displayerImage->setImage( this->m_dataImage);
    
81. 
    
82. }
    
83. 
    
84. /*!
    
85. 
    
86.   * 加载镜像，并提出灰度,并画点
    
87.   */
    
88. void EditScene::LoadPointByImage( QImage *
    
89. img )
    
90. {
    
91.     if( !img->isNull() ){
    
92.         for( int i = 0; i
    
93. < img->height(); ++i ){
    
94.             for ( int j = 0; j <
    
95. img->width(); ++j ){
    
96.                 int gray = qGray(
    
97. img->pixel( QPoint(j,i) ) );
    
98.                 if( gray == 0 ){
    
99. 
    
100.                    //! 要加入 光标的位置 m_cursorTopLeft
     
101.                     
     
102. DrawPoint(  m_cursorTopLeft.x()+ j,m_cursorTopLeft.y()+ i );
     
103.         
     
104.         }
     
105.             }
     
106.         }
     
107.     }
     
108.    
     
109. this->m_displayerImage->setImage( this->m_dataImage);
     
110.    
     
111. //移动光标
     
112.     emit this->sendNewUnit();
     
113.     emit
     
114. this->sendCursorMove( Location::Right);
     
115. 
     
116. }
     
117. /*!
     
118.   *
     
119. 获取清除区域范围
     
120.   */
     
121. void EditScene::cleanRect(QRect rect)
     
122. {
     
123.    
     
124. //移动光标
     
125. //    emit this->sendCursorMove( Location::Left);
     
126. //   
     
127. QSize cleanSize = rect.size();
     
128. //    QImage cleanImage =
     
129. this->m_dataImage.scaled(
     
130. cleanSize,Qt::KeepAspectRatio,Qt::FastTransformation);
     
131.    
     
132. m_cleanTopLeft = rect.topLeft();
     
133.     qDebug() << rect.topLeft()
     
134. <<__FILE__<<__LINE__;
     
135.     this->cleanPointByImage(
     
136. &m_dataImage.copy( rect ) );
     
137. 
     
138. }
     
139. 
     
140. /*!
     
141.   * 清除区域内所有点
     
142. 
     
143.   */
     
144. void EditScene::cleanPointByImage(QImage  *img)
     
145. {
     
146. 
     
147.    
     
148. if( !img->isNull() ){
     
149.         for( int i = 0; i <
     
150. img->height(); ++i ){
     
151.             for ( int j = 0; j <
     
152. img->width(); ++j ){
     
153.                 int gray = qGray(
     
154. img->pixel( QPoint(j,i) ) );
     
155.                 if( gray == 0 ){
     
156. 
     
157.                    //! 要加入 光标的位置 m_cursorTopLeft
     
158. 
     
159.                
     
160.     this->ClearPoint(j+m_cleanTopLeft.x(),i+ m_cleanTopLeft.y());
     
161. 
     
162.                 }
     
163.             }
     
164.         }
     
165.     }
     
166.    
     
167. this->m_displayerImage->setImage( this->m_dataImage);
     
168. 
     
169. }
     

复制代码

代码下载请到下面地址：

yafeilinux

很实用的教程。希望大家可以继续完善，把点阵这一块全部搞定。

liudianwu

很好很强大，支持！绝对顶！

拖布鞋

楼主，您好！我下载您的原码编译后出现下面问题，我用的是QT5.
In member function 'void EditScene::cleanRect(QRect)':
错误:taking address of temporary [-fpermissive]

这个是什么原因？该怎么解决。

lpdpzc

新来报到，谢谢，支持。。。

风水星

lpdpzc 发表于 2014-12-4 09:45
新来报到，谢谢，支持。。。

新来报到，谢谢，支持。。。