Translate images with mouse

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
deb75
Prole
Posts: 38
Joined: Sun Apr 18, 2021 1:11 pm

Translate images with mouse

Post by deb75 »

Hello,

In my game, I would like to be able to translate images with mouse, just like you click on a window, keep pressed,
and move it where you want on the screen with the mouse.

There are several callbacks for the mouse :
- love.mousepressed
- love.mousereleased
- love.mousemoved

I guess I should use mousepressed and mousemoved but, I do not understand exactly how to do because the translation
must take place only if mouse is pressed and only if the mouse actually moves. Should I combine both callbacks ?

Regards
User avatar
GVovkiv
Party member
Posts: 668
Joined: Fri Jan 15, 2021 7:29 am

Re: Translate images with mouse

Post by GVovkiv »

Moving:

Code: Select all

local obj = {x = 100, y = 100, w = 100, h = 100}
local grab = false
local x1, y1

love.mousemoved = function(x, y)
  if grab then
    obj.x = x - x1
    obj.y = y - y1
  end
end

love.mousereleased = function(_, _, button)
  if button == 1 then
  grab = false
  end
end

love.mousepressed = function(x, y, button)
  if button == 1 then
    if x > obj.x and x < obj.x + obj.w and y > obj.y and y < obj.y + obj.h then
    grab = true
    x1 = math.abs(obj.x - x)
    y1 = math.abs(obj.y - y)
    end
  end
end

love.draw = function()
  love.graphics.rectangle("line", obj.x, obj.y, obj.w, obj.h)
end
I guess, it's as bonus?
Resizing (if it rectangle, which don't have fixed size or something):

Code: Select all

local obj = {x = 100, y = 100, w = 100, h = 100}
local grab = false
local x1, y1

love.mousemoved = function(x, y)
  if grab then
    obj.w = x - obj.x
    obj.h = y - obj.y
  end
end

love.mousereleased = function(_, _, button)
  if button == 1 then
  grab = false
  end
end

love.mousepressed = function(x, y, button)
  if button == 1 then
    if x > obj.x and x < obj.x + obj.w and y > obj.y and y < obj.y + obj.h then
    grab = true
    x1 = math.abs(obj.x - x)
    y1 = math.abs(obj.y - y)
    end
  end
end

love.draw = function()
  love.graphics.rectangle("line", obj.x, obj.y, obj.w, obj.h)
end
Resizing (in case, if it actually texture, which have it's own size, when you load or create it):

Code: Select all

local obj = {x = 100, y = 100, w = 100, h = 100, sw = 1, sh = 1}
local grab = false
local rect = love.graphics.newCanvas(obj.w, obj.h)
obj.w1, obj.h1 = obj.w, obj.h -- to calculate scaling from point A to B, we need to store somewhere original width and height of image
--In this case, i can took values from table with rectangle, but if you need take it from actual image you can use object_with_image:getWidth() and object_with_image:getHeight() (https://www.love2d.org/wiki/Image, https://www.love2d.org/wiki/Texture:getHeight)
--If, for some reason, image may be changed and this change have different size, you should update this values

love.graphics.setCanvas(rect)
love.graphics.rectangle("line", 0, 0, obj.w, obj.h)
love.graphics.setCanvas()

love.mousemoved = function(x, y)
  if grab then
    obj.sw = math.abs(obj.x - x) / obj.w1
    obj.sh = math.abs(obj.y - y) / obj.h1
  end
end

love.mousereleased = function(x, y, button)
  if button == 1 then
  grab = false
  obj.w = math.abs(obj.x - x)
  obj.h = math.abs(obj.y - y)
  end
end

love.mousepressed = function(x, y, button)
  if button == 1 then
    if x > obj.x and x < obj.x + obj.w and y > obj.y and y < obj.y + obj.h then
    grab = true
    end
  end
end

love.draw = function()
  love.graphics.draw(rect, obj.x, obj.y, 0, obj.sw, obj.sh) -- 4 and 5 argument stand for scaling for this image
end
deb75
Prole
Posts: 38
Joined: Sun Apr 18, 2021 1:11 pm

Re: Translate images with mouse

Post by deb75 »

Thank you so much !

Exactly what I need.

Regards
Post Reply

Who is online

Users browsing this forum: No registered users and 46 guests