问题出在 x 和 y 位置，鼠标可以在按钮外单击

Question

此程序的目标是必须在绿色矩形上单击鼠标，这会将 window 背景颜色更改为黄色或返回默认颜色，问题是颜色也可以更改从矩形的外面。

鼠标点击应该只适用于矩形内部。

我猜问题出在 if else 语句中的 x 和 y 位置？

此外，“单击我”文本不会出现在按钮上。 enter image description here

按钮的正确 x 和 y 位置在此 table，单击 link。

require 'rubygems'
require 'gosu'

# Instructions:  This code needs to be fixed and finished!
# The "Click Me" text is not appearing on the button, also
# the mouse_y co-ordinate should be shown along with the mouse_x one
# finally, a user has noticed the sometimes the button action occurs
# when you click out side the button area and vice-versa.


# determines whether a graphical widget is placed over others or not
module ZOrder
  BACKGROUND, MIDDLE, TOP = *0..2
end

# Global constants
WIN_WIDTH = 640
WIN_HEIGHT = 400

class DemoWindow < Gosu::Window

  # set up variables and attributes
  def initialize
    super(WIN_WIDTH, WIN_HEIGHT, false)
    @background = Gosu::Color::WHITE
    @button_font = Gosu::Font.new(20)
    @info_font = Gosu::Font.new(10)
    @locs = [60,60]
  end


  # Draw the background, the button with 'click me' text and text
  # showing the mouse coordinates
  def draw
    # Draw background color
    Gosu.draw_rect(0, 0, WIN_WIDTH, WIN_HEIGHT, @background, ZOrder::BACKGROUND, mode=:default)
    # Draw the button
    Gosu.draw_rect(50, 50, 100, 50, Gosu::Color::GREEN, ZOrder::TOP, mode=:default)
    # Draw the button text
    @button_font.draw("Click me", 60, 60, ZOrder::MIDDLE, 1.0, 1.0, Gosu::Color::BLACK)
    # Draw the mouse position information
    @info_font.draw("mouse_x: #{@locs[0]}", 0, 350, ZOrder::TOP, 1.0, 1.0, Gosu::Color::BLACK)
  end

  # this is called by Gosu to see if should show the cursor (or mouse)
  def needs_cursor?
    true
  end

  # If the button area (rectangle) has been clicked on change the background color
  # also store the mouse_x and mouse_y attributes that we 'inherit' from Gosu
  # you will learn about inheritance in the OOP unit - for now just accept that
  # these are available and filled with the latest x and y locations of the mouse click.

  def mouse_over_button(mouse_x, mouse_y)
    if ((mouse_x > 50 and mouse_x < 150) or (mouse_y > 50 and mouse_x < 100))
      true
    else
      false
    end
  end

  # Where is mouse_x and mouse_y defined

  def button_down(id)
    case id
    when Gosu::MsLeft
      @locs = [mouse_x, mouse_y]
      if mouse_over_button(mouse_x, mouse_y)
        @background = Gosu::Color::YELLOW
      else
        @background = Gosu::Color::WHITE
      end
    end
  end
end

# Lets get started!
DemoWindow.new.show

Answer 1

mouse_over_button方法中鼠标位置检测逻辑有错误。当满足所有条件时，鼠标位于按钮区域上方。它应该是：

def mouse_over_button(mouse_x, mouse_y)
  mouse_x > 50 and mouse_x < 150 and mouse_y > 50 and mouse_x < 100
end

我还删除了多余的 "if" 构造，因为它不需要。

Answer 2

要在按钮上显示文本，您只需在第 40 行将按钮文本的 ZOrder 从 MIDDLE 更改为 TOP，因为按钮布局顺序位于按钮文本的顶部。我看到您从介绍中提出了这个问题。到斯威本大学的编程单元。我是那里的第一年。祝你好运 ;)

问题出在 x 和 y 位置，鼠标可以在按钮外单击

The problem is with the x and y position, where the mouse can be click outside of the button

ruby

libgosu