Archive:Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10 (zh CN): Difference between revisions

From KDE TechBase
(Created page with '{{Template:I18n/Language Navigation Bar_(zh_CN)|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}} {{TutorialBrowser_(zh_CN)| series=[[Development/Tutorials/Qt4_Ruby_Tutorial...')
 
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Template:I18n/Language Navigation Bar_(zh_CN)|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}}
{{Template:I18n/Language Navigation Bar_(zh_CN)|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 10}}  


{{TutorialBrowser_(zh_CN)|
{{TutorialBrowser_(zh_CN)|
Line 9: Line 9:
pre=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_09_(zh_CN)|教学 9 - With Cannon You Can]]|
pre=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_09_(zh_CN)|教学 9 - With Cannon You Can]]|


next=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_11|教学 11 - Giving It a Shot]]
next=[[Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_11_(zh_CN)|教学 11 - Giving It a Shot]]
}}
}}  
== Smooth as Silk ==
 
[[Image:Qt4_Ruby_Tutorial_Screenshot_10.png|center]]
== Smooth as Silk ==
档案:
 
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/lcdrange.rb lcdrange.rb]
[[Image:Qt4 Ruby Tutorial Screenshot 10.png|center]] 档案:
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]
 
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]
*[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/lcdrange.rb lcdrange.rb]  
*[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]  
*[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]
 
=== 概览 ===


===概览===
在这个范例中,我们增加了力量(force)控制。  
在这个范例中,我们增加了力量(force)控制。  


===一行一行的浏览===
=== 一行一行的浏览 ===
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]'''


'''<tt>CannonField</tt>''' 现在除了角度外,又加入力量值。
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/cannon.rb cannon.rb]'''  


<code ruby>
'''<tt>CannonField</tt>''' 现在除了角度外,又加入力量值。
 
<syntaxhighlight lang="ruby">
signals 'angleChanged(int)', 'forceChanged(int)'
signals 'angleChanged(int)', 'forceChanged(int)'
slots 'setAngle(int)', 'setForce(int)'
slots 'setAngle(int)', 'setForce(int)'
</code>
</syntaxhighlight>  


力量的接口遵循和角度相同的写法。
力量的接口遵循和角度相同的写法。  


<code ruby>
<syntaxhighlight lang="ruby">
def initialize(parent = nil)
def initialize(parent = nil)
   super()
   super()
Line 43: Line 47:
   setAutoFillBackground(true)
   setAutoFillBackground(true)
end
end
</code>
</syntaxhighlight>  


力量 '''<tt>@currentForce</tt>''' 初始化为零。
力量 '''<tt>@currentForce</tt>''' 初始化为零。  


<code ruby>
<syntaxhighlight lang="ruby">
def setAngle(angle)
def setAngle(angle)
   if angle < 5
   if angle < 5
Line 63: Line 67:
   emit angleChanged(@currentAngle)
   emit angleChanged(@currentAngle)
end
end
</code>
</syntaxhighlight>  


我们在 '''<tt>setAngle()</tt>''' 函式作了一点轻微的改变。它只有重画 widget 中包含加农炮的部分。
我们在 '''<tt>setAngle()</tt>''' 函式作了一点轻微的改变。它只有重画 widget 中包含加农炮的部分。  


<code ruby>
<syntaxhighlight lang="ruby">
def setForce(force)
def setForce(force)
   if force < 0
   if force < 0
Line 79: Line 83:
   emit forceChanged(@currentForce)
   emit forceChanged(@currentForce)
end
end
</code>
</syntaxhighlight>  


'''<tt>setForce()</tt>''' 的实现相当类似 '''<tt>setAngle()</tt>'''。唯一的差别是,因为我们没有显示力量值,所以不需要重绘 widget。
'''<tt>setForce()</tt>''' 的实现相当类似 '''<tt>setAngle()</tt>'''。唯一的差别是,因为我们没有显示力量值,所以不需要重绘 widget。  


<code ruby>
<syntaxhighlight lang="ruby">
def paintEvent(event)
def paintEvent(event)
   painter = Qt::Painter.new(self)
   painter = Qt::Painter.new(self)
Line 96: Line 100:
   painter.end()
   painter.end()
end
end
</code>
</syntaxhighlight>  


我们像第9章一样绘制。
我们像第9章一样绘制。  


<code ruby>
<syntaxhighlight lang="ruby">
def cannonRect()
def cannonRect()
   result = Qt::Rect.new(0, 0, 50, 50)
   result = Qt::Rect.new(0, 0, 50, 50)
Line 106: Line 110:
   return result
   return result
end
end
</code>
</syntaxhighlight>  


'''<tt>cannonRect()</tt>''' 函式返回 widget 坐标中封装加农炮的矩形。首先,我们建立一个大小50×50的矩形。然后移动它,所以它的左下角等同于 widget 自己的左下角。
'''<tt>cannonRect()</tt>''' 函式返回 widget 坐标中封装加农炮的矩形。首先,我们建立一个大小50×50的矩形。然后移动它,所以它的左下角等同于 widget 自己的左下角。  


[http://doc.qt.nokia.com/latest/qwidget.html#rect-prop Qt::Widget::rect()] 函式返回在 widget 坐标中封装 widget 自己矩形。矩形的左上角永远是(0,0)。
[http://doc.qt.nokia.com/latest/qwidget.html#rect-prop Qt::Widget::rect()] 函式返回在 widget 坐标中封装 widget 自己矩形。矩形的左上角永远是(0,0)。  


'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]'''
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t10/t10.rb t10.rb]'''  


建构子大部分相同,但新增了一些东西。
建构子大部分相同,但新增了一些东西。  


<code ruby>
<syntaxhighlight lang="ruby">
force = LCDRange.new()
force = LCDRange.new()
force.setRange(10, 50)
force.setRange(10, 50)
</code>
</syntaxhighlight>  


我们加入第二个 '''<tt>LCDRange</tt>''',用来设定力量。
我们加入第二个 '''<tt>LCDRange</tt>''',用来设定力量。  


<code ruby>
<syntaxhighlight lang="ruby">
connect(force, SIGNAL('valueChanged(int)'),
connect(force, SIGNAL('valueChanged(int)'),
         cannonField, SLOT('setForce(int)'))
         cannonField, SLOT('setForce(int)'))
connect(cannonField, SIGNAL('forceChanged(int)'),
connect(cannonField, SIGNAL('forceChanged(int)'),
         force, SLOT('setValue(int)'))
         force, SLOT('setValue(int)'))
</code>
</syntaxhighlight>  


我们连接 '''<tt>force</tt>''' widget 和 '''<tt>cannonField</tt>''' widget,就像我们为 '''<tt>angle</tt>''' widget 所作的。
我们连接 '''<tt>force</tt>''' widget 和 '''<tt>cannonField</tt>''' widget,就像我们为 '''<tt>angle</tt>''' widget 所作的。  


<code ruby>
<syntaxhighlight lang="ruby">
leftLayout = Qt::VBoxLayout.new()
leftLayout = Qt::VBoxLayout.new()
leftLayout.addWidget(angle)
leftLayout.addWidget(angle)
Line 142: Line 146:
gridLayout.addWidget(cannonField, 1, 1, 2, 1)
gridLayout.addWidget(cannonField, 1, 1, 2, 1)
gridLayout.setColumnStretch(1, 10)
gridLayout.setColumnStretch(1, 10)
</code>
</syntaxhighlight>  


在第9章中,我们把 '''<tt>angle</tt>''' 放在布局的左下格。现在,我们想有两个 widget在该格中,所以我们做一个 vertical box,把 vertical box 放在网格中,并且把 '''<tt>angle</tt>''' 和 '''<tt>range</tt>''' 放入 vertical box。
在第9章中,我们把 '''<tt>angle</tt>''' 放在布局的左下格。现在,我们想有两个 widget在该格中,所以我们做一个 vertical box,把 vertical box 放在网格中,并且把 '''<tt>angle</tt>''' 和 '''<tt>range</tt>''' 放入 vertical box。  


<code ruby>
<syntaxhighlight lang="ruby">
force.setValue(25)
force.setValue(25)
</code>
</syntaxhighlight>  
 
我们初始化力量值为25。
 
=== 执行应用程序 ===


我们初始化力量值为25。
我们现在有力量控制了。


===执行应用程序===
=== 练习 ===
我们现在有力量控制了。


===练习===
使炮管的大小依据力量的变化。  
使炮管的大小依据力量的变化。


把加农炮放在右下角。
把加农炮放在右下角。  


尝试增加一个更好的键盘接口。例如,用+和-来增加和减少力量,并用 enter 发射。如果你对'''<tt>左</tt>'''和'''<tt>右</tt>'''箭头键的运作的方式感到困扰,也更改它吧。[提示:重新实作 [http://doc.qt.nokia.com/latest/qwidget.html#keyPressEvent Qt::Widget::keyPressEvent()]。]
尝试增加一个更好的键盘接口。例如,用+和-来增加和减少力量,并用 enter 发射。如果你对'''<tt>左</tt>'''和'''<tt>右</tt>'''箭头键的运作的方式感到困扰,也更改它吧。[提示:重新实作 [http://doc.qt.nokia.com/latest/qwidget.html#keyPressEvent Qt::Widget::keyPressEvent()]。]  


[[Category:Ruby]]
[[Category:Ruby]]

Latest revision as of 15:58, 23 June 2013

Template:I18n/Language Navigation Bar (zh CN)

Template:TutorialBrowser (zh CN)

Smooth as Silk

档案:

概览

在这个范例中,我们增加了力量(force)控制。

一行一行的浏览

cannon.rb

CannonField 现在除了角度外,又加入力量值。

signals 'angleChanged(int)', 'forceChanged(int)'
slots 'setAngle(int)', 'setForce(int)'

力量的接口遵循和角度相同的写法。

def initialize(parent = nil)
  super()

  @currentAngle = 45
  @currentForce = 0

  setPalette(Qt::Palette.new(Qt::Color.new(250, 250, 200)))
  setAutoFillBackground(true)
end

力量 @currentForce 初始化为零。

def setAngle(angle)
  if angle < 5
    angle = 5
  elsif angle > 70
    angle = 70
  end

  if @currentAngle == angle
    return
  end

  @currentAngle = angle
  update(cannonRect())
  emit angleChanged(@currentAngle)
end

我们在 setAngle() 函式作了一点轻微的改变。它只有重画 widget 中包含加农炮的部分。

def setForce(force)
  if force < 0
    force = 0
  end
  if @currentForce == force
    return
  end

  @currentForce = force
  emit forceChanged(@currentForce)
end

setForce() 的实现相当类似 setAngle()。唯一的差别是,因为我们没有显示力量值,所以不需要重绘 widget。

def paintEvent(event)
  painter = Qt::Painter.new(self)

  painter.setPen(Qt::NoPen)
  painter.setBrush(Qt::Brush.new(Qt::blue))

  painter.translate(0, height())
  painter.drawPie(Qt::Rect.new(-35, -35, 70, 70), 0, 90 * 16)
  painter.rotate(-@currentAngle)
  painter.drawRect(Qt::Rect.new(30, -5, 20, 10))
  painter.end()
end

我们像第9章一样绘制。

def cannonRect()
  result = Qt::Rect.new(0, 0, 50, 50)
  result.moveBottomLeft(rect().bottomLeft())
  return result
end

cannonRect() 函式返回 widget 坐标中封装加农炮的矩形。首先,我们建立一个大小50×50的矩形。然后移动它,所以它的左下角等同于 widget 自己的左下角。

Qt::Widget::rect() 函式返回在 widget 坐标中封装 widget 自己矩形。矩形的左上角永远是(0,0)。

t10.rb

建构子大部分相同,但新增了一些东西。

force = LCDRange.new()
force.setRange(10, 50)

我们加入第二个 LCDRange,用来设定力量。

connect(force, SIGNAL('valueChanged(int)'),
         cannonField, SLOT('setForce(int)'))
connect(cannonField, SIGNAL('forceChanged(int)'),
         force, SLOT('setValue(int)'))

我们连接 force widget 和 cannonField widget,就像我们为 angle widget 所作的。

leftLayout = Qt::VBoxLayout.new()
leftLayout.addWidget(angle)
leftLayout.addWidget(force)

gridLayout = Qt::GridLayout.new()
gridLayout.addWidget(quit, 0, 0)
gridLayout.addLayout(leftLayout, 1, 0)
gridLayout.addWidget(cannonField, 1, 1, 2, 1)
gridLayout.setColumnStretch(1, 10)

在第9章中,我们把 angle 放在布局的左下格。现在,我们想有两个 widget在该格中,所以我们做一个 vertical box,把 vertical box 放在网格中,并且把 anglerange 放入 vertical box。

force.setValue(25)

我们初始化力量值为25。

执行应用程序

我们现在有力量控制了。

练习

使炮管的大小依据力量的变化。

把加农炮放在右下角。

尝试增加一个更好的键盘接口。例如,用+和-来增加和减少力量,并用 enter 发射。如果你对箭头键的运作的方式感到困扰,也更改它吧。[提示:重新实作 Qt::Widget::keyPressEvent()。]