class Dare::Image

Represents an image which can be drawn to a canvas

Public Class Methods

load_tiles(path = "", opts = {}) click to toggle source

Loads image and cuts it into tiles

@param [String] path (“”) the path to the resource @param [Hash] opts ({}) the options to create an image. @option opts [Integer] :width (Image.new(path).width) width of a single tile from the image @option opts [Integer] :height (Image.new(path).height) height of a single tile from the image

@return [Array] An array of images each of which are individual tiles of the original

# File lib/dare/image.rb, line 177
def self.load_tiles(path = "", opts = {})

  image = Image.new(path)
  @tiles = []

  %x{
    #{image.img}.onload = function() {
      #{opts[:width] ||= image.width};
      #{opts[:height] ||= image.height};
      #{columns = image.width/opts[:width]};
      #{rows = image.height/opts[:height]};

      #{rows.times do |row|
        columns.times do |column|
          @tiles << ImageTile.new(image, column*opts[:width].to_i, row*opts[:height].to_i, opts[:width].to_i, opts[:height].to_i)
        end
      end};
    }
  }
  @tiles
end
new(path = "", opts = {}) click to toggle source

Loads a new image resource from an absolute URL or relative path

@param [String] path (“”) the path to the resource @param [Hash] opts ({}) the options to create an image. @option opts [Dare::Canvas] :canvas (Dare.default_canvas) a canvas to refer to when drawing.

@example

Dare::Image.new('some_image.png')

@example

Dare::Image.new('https://www.google.com/images/srpr/logo11w.png', canvas: Dare::Canvas.new)
# File lib/dare/image.rb, line 19
def initialize(path = "", opts = {})
  opts[:canvas] ||= Dare.default_canvas
  @path = path
  @img = `new Image()`
  `#{@img}.src = #{path}`
  @canvas = opts[:canvas]
end

Public Instance Methods

draw(x = 0, y = 0, opts = {}) click to toggle source

Draws image to a canvas at an ‘x` and `y` position. `x` and `y` represent the top-left corner of the image

@param [Integer] x (0) x coordinate of top-left of image @param [Integer] y (0) y coordinate of top-left of image @param [Hash] opts ({}) the options to draw an image. @option opts [Dare::Canvas] :canvas (Dare.default_canvas) a canvas to refer to when drawing.

@example

image.draw(100, 200)

@example

image.draw(10, 10, canvas: Dare::Canvas.new(width: 100, height: 100))
# File lib/dare/image.rb, line 68
def draw(x = 0, y = 0, opts = {})

  opts[:canvas] ||= @canvas
  %x{
    #{opts[:canvas].context}.drawImage(
      #{@img},
      #{x},
      #{y}
    );
  }
end
draw_rot(x = 0, y = 0, angle = 90, opts = {}) click to toggle source

Draws image to a canvas at an x and y position and rotated at some angle x and y represent the center of the image angle is in degrees starting by pointing to the right and increasing counterclockwise

@param [Integer] x (0) x coordinate of center of image @param [Integer] y (0) y coordinate of center of image @param [Float] angle (90.0) angle of image @param [Hash] opts ({}) the options to draw an image. @option opts [Dare::Canvas] :canvas (Dare.default_canvas) a canvas to refer to when drawing.

@example

image.draw_rot(100, 200, 45) # this will point the top of the image up and to the right

@example

image.draw_rot(50, 75, 270, canvas: some_other_canvas)
# File lib/dare/image.rb, line 124
def draw_rot(x = 0, y = 0, angle = 90, opts = {})
  opts[:canvas] ||= @canvas
  %x{
    var context = #{opts[:canvas].context};
    var width = #{@img}.width;
    var height = #{@img}.height;
    context.translate(#{x}, #{y});
    context.rotate(-#{angle-90}*Math.PI/180.0);
    context.drawImage(#{@img}, -width/2, -height/2, width, height);
    context.rotate(#{angle-90}*Math.PI/180.0);
    context.translate(-#{x}, -#{y});
  }
end
draw_tile(x = 0, y = 0, opts = {}) click to toggle source

(see draw) @note Used by Dare::ImageTile to draw a portion of an image to a canvas.

# File lib/dare/image.rb, line 83
def draw_tile(x = 0, y = 0, opts = {})

  opts[:canvas] ||= @canvas
  opts[:sx] ||= 0
  opts[:sy] ||= 0
  opts[:swidth] ||= width - opts[:sx]
  opts[:sheight] ||= height - opts[:sy]
  opts[:dwidth] ||= opts[:swidth]
  opts[:dheight] ||= opts[:sheight]

  %x{
    #{opts[:canvas].context}.drawImage(
      #{@img},
      #{opts[:sx]},
      #{opts[:sy]},
      #{opts[:swidth]},
      #{opts[:sheight]},
      #{x},
      #{y},
      #{opts[:dwidth]},
      #{opts[:dheight]}
    );
  }
end
draw_tile_rot(x = 0, y = 0, angle = 90, opts = {}) click to toggle source

(see draw_rot) @note Used by Dare::ImageTile to draw a portion of an image to a canvas at an angle.

# File lib/dare/image.rb, line 141
def draw_tile_rot(x = 0, y = 0, angle = 90, opts = {})
  opts[:canvas] ||= @canvas
  opts[:sx] ||= 0
  opts[:sy] ||= 0
  opts[:swidth] ||= width - opts[:sx]
  opts[:sheight] ||= height - opts[:sy]
  opts[:dwidth] ||= opts[:swidth]
  opts[:dheight] ||= opts[:sheight]
  %x{
    var context = #{opts[:canvas].context};
    context.translate(#{x}, #{y});
    context.rotate(-#{angle-90}*Math.PI/180.0);
    context.drawImage(
      #{@img},
      #{opts[:sx]},
      #{opts[:sy]},
      #{opts[:swidth]},
      #{opts[:sheight]},
      -#{opts[:swidth]}/2,
      -#{opts[:sheight]}/2,
      #{opts[:swidth]},
      #{opts[:sheight]});
    context.rotate(#{angle-90}*Math.PI/180.0);
    context.translate(-#{x}, -#{y});
  }
end
height() click to toggle source

The height of the image in pixels

@return [Integer]

# File lib/dare/image.rb, line 51
def height
  `#{@img}.height`
end
img() click to toggle source
# File lib/dare/image.rb, line 35
def img
  @img
end
path() click to toggle source

The path or URL of the image

@return [String]

# File lib/dare/image.rb, line 31
def path
  @path
end
width() click to toggle source

The width of the image in pixels

@return [Integer]

# File lib/dare/image.rb, line 43
def width
  `#{@img}.width`
end