Class: Dare::Image

Inherits:
Object
  • Object
show all
Defined in:
lib/dare/image.rb

Overview

Represents an image which can be drawn to a canvas

Class Method Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(path = "", opts = {}) ⇒ Image

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

Examples:

Dare::Image.new('some_image.png')
Dare::Image.new('https://www.google.com/images/srpr/logo11w.png', canvas: Dare::Canvas.new)

Parameters:

  • path (String) (defaults to: "") —

    (“”) the path to the resource

  • opts (Hash) (defaults to: {}) —

    ({}) the options to create an image.

Options Hash (opts):

  • :canvas (Dare::Canvas) — default: Dare.default_canvas —

    a canvas to refer to when drawing.



19
20
21
22
23
24
25
 
# 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

Class Method Details

.load_tiles(path = "", opts = {}) ⇒ Array

Loads image and cuts it into tiles

Parameters:

  • path (String) (defaults to: "") —

    (“”) the path to the resource

  • opts (Hash) (defaults to: {}) —

    ({}) the options to create an image.

Options Hash (opts):

  • :width (Integer) — default: Image.new(path).width —

    width of a single tile from the image

  • :height (Integer) — default: Image.new(path).height —

    height of a single tile from the image

Returns:

  • (Array) —

    An array of images each of which are individual tiles of the original



177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
 
# 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

Instance Method Details

#draw(x = 0, y = 0, opts = {}) ⇒ Object

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

Examples:

image.draw(100, 200)
image.draw(10, 10, canvas: Dare::Canvas.new(width: 100, height: 100))

Parameters:

  • x (Integer) (defaults to: 0) —

    (0) x coordinate of top-left of image

  • y (Integer) (defaults to: 0) —

    (0) y coordinate of top-left of image

  • opts (Hash) (defaults to: {}) —

    ({}) the options to draw an image.

Options Hash (opts):

  • :canvas (Dare::Canvas) — default: Dare.default_canvas —

    a canvas to refer to when drawing.



68
69
70
71
72
73
74
75
76
77
78
 
# 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 = {}) ⇒ Object

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

Examples:

image.draw_rot(100, 200, 45) # this will point the top of the image up and to the right
image.draw_rot(50, 75, 270, canvas: some_other_canvas)

Parameters:

  • x (Integer) (defaults to: 0) —

    (0) x coordinate of center of image

  • y (Integer) (defaults to: 0) —

    (0) y coordinate of center of image

  • angle (Float) (defaults to: 90) —

    (90.0) angle of image

  • opts (Hash) (defaults to: {}) —

    ({}) the options to draw an image.

Options Hash (opts):

  • :canvas (Dare::Canvas) — default: Dare.default_canvas —

    a canvas to refer to when drawing.



124
125
126
127
128
129
130
131
132
133
134
135
136
 
# 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 = {}) ⇒ Object

Note:

Used by Dare::ImageTile to draw a portion of an image to a canvas.

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

Examples:

image.draw(100, 200)
image.draw(10, 10, canvas: Dare::Canvas.new(width: 100, height: 100))

Parameters:

  • x (Integer) (defaults to: 0) —

    (0) x coordinate of top-left of image

  • y (Integer) (defaults to: 0) —

    (0) y coordinate of top-left of image

  • opts (Hash) (defaults to: {}) —

    ({}) the options to draw an image.

Options Hash (opts):

  • :canvas (Dare::Canvas) — default: Dare.default_canvas —

    a canvas to refer to when drawing.



83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
# 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 = {}) ⇒ Object

Note:

Used by Dare::ImageTile to draw a portion of an image to a canvas at an angle.

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

Examples:

image.draw_rot(100, 200, 45) # this will point the top of the image up and to the right
image.draw_rot(50, 75, 270, canvas: some_other_canvas)

Parameters:

  • x (Integer) (defaults to: 0) —

    (0) x coordinate of center of image

  • y (Integer) (defaults to: 0) —

    (0) y coordinate of center of image

  • angle (Float) (defaults to: 90) —

    (90.0) angle of image

  • opts (Hash) (defaults to: {}) —

    ({}) the options to draw an image.

Options Hash (opts):

  • :canvas (Dare::Canvas) — default: Dare.default_canvas —

    a canvas to refer to when drawing.



141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
 
# 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 ⇒ Integer

The height of the image in pixels

Returns:

  • (Integer) 


51
52
53
 
# File 'lib/dare/image.rb', line 51

def height
  `#{@img}.height`
end

#img ⇒ Object 



35
36
37
 
# File 'lib/dare/image.rb', line 35

def img
  @img
end

#path ⇒ String

The path or URL of the image

Returns:

  • (String) 


31
32
33
 
# File 'lib/dare/image.rb', line 31

def path
  @path
end

#width ⇒ Integer

The width of the image in pixels

Returns:

  • (Integer) 


43
44
45
 
# File 'lib/dare/image.rb', line 43

def width
  `#{@img}.width`
end