Class: Browser::Canvas

Inherits:
Object show all
Includes:
Native::Wrapper
Defined in:
opal/browser/canvas.rb,
opal/browser/canvas/data.rb,
opal/browser/canvas/text.rb,
opal/browser/canvas/style.rb,
opal/browser/canvas/gradient.rb

Defined Under Namespace

Classes: Data, Gradient, Style, StyleObject, Text

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(*args) ⇒ Canvas

Returns a new instance of Canvas.



14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
# File 'opal/browser/canvas.rb', line 14

def initialize(*args)
  if DOM::Element === args.first
    element = args.shift

    if DOM::Element::Image === element
      @image   = element
    else
      @element = element
    end
  elsif Canvas === args.first
    @image = args.first
  end

  unless @element
    @element = $document.create_element('canvas')

    if @image
      @element[:width]  = @image.width
      @element[:height] = @image.height
    else
      @element[:width]  = args.shift
      @element[:height] = args.shift
    end
  end

  if @element.node_name != 'CANVAS'
    raise ArgumentError, "the element isn't a <canvas> element"
  end

  super(`#{@element.to_n}.getContext('2d')`)

  @style = Style.new(self)
  @text  = Text.new(self)

  if @image
    draw_image(@image)
  end
end

Instance Attribute Details

#element ⇒ Object (readonly)

Returns the value of attribute element.



12
13
14
 
# File 'opal/browser/canvas.rb', line 12

def element
  @element
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



12
13
14
 
# File 'opal/browser/canvas.rb', line 12

def style
  @style
end

#text ⇒ Object (readonly)

Returns the value of attribute text.



12
13
14
 
# File 'opal/browser/canvas.rb', line 12

def text
  @text
end

Instance Method Details

#append_to(parent) ⇒ Object 



69
70
71
 
# File 'opal/browser/canvas.rb', line 69

def append_to(parent)
  @element.append_to(parent)
end

#arc(x, y, radius, angle, clockwise = false) ⇒ Object 



161
162
163
164
165
 
# File 'opal/browser/canvas.rb', line 161

def arc(x, y, radius, angle, clockwise = false)
  `#@native.arc(x, y, radius, #{angle[:start]}, #{angle[:end]}, !clockwise)`

  self
end

#begin ⇒ Object 



112
113
114
115
116
 
# File 'opal/browser/canvas.rb', line 112

def begin
  `#@native.beginPath()`

  self
end

#bezier_curve_to(cp1x, cp1y, cp2x, cp2y, x, y) ⇒ Object 



173
174
175
176
177
 
# File 'opal/browser/canvas.rb', line 173

def bezier_curve_to(cp1x, cp1y, cp2x, cp2y, x, y)
  `#@native.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`

  self
end

#clear(x = nil, y = nil, width = nil, height = nil) ⇒ Object 



103
104
105
106
107
108
109
110
 
# File 'opal/browser/canvas.rb', line 103

def clear(x = nil, y = nil, width = nil, height = nil)
  x      ||= 0
  y      ||= 0
  width  ||= self.width
  height ||= self.height

  `#@native.clearRect(x, y, width, height)`
end

#clip(&block) ⇒ Object 



307
308
309
310
311
312
313
 
# File 'opal/browser/canvas.rb', line 307

def clip(&block)
  path(&block) if block

  `#@native.clip()`

  self
end

#close ⇒ Object 



118
119
120
121
122
 
# File 'opal/browser/canvas.rb', line 118

def close
  `#@native.closePath()`

  self
end

#curve_to(*args) ⇒ Object 



179
180
181
182
183
184
185
186
187
188
 
# File 'opal/browser/canvas.rb', line 179

def curve_to(*args)
  case args.length
  when 4 then quadratic_curve_to(*args)
  when 6 then bezier_curve_to(*args)

  else raise ArgumentError, "don't know where to dispatch"
  end

  self
end

#data(x = nil, y = nil, width = nil, height = nil) ⇒ Object 



86
87
88
89
90
91
92
93
 
# File 'opal/browser/canvas.rb', line 86

def data(x = nil, y = nil, width = nil, height = nil)
  x      ||= 0
  y      ||= 0
  width  ||= self.width
  height ||= self.height

  Data.new(self, x, y, width, height)
end

#draw_image(image, *args) ⇒ Object 



190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
 
# File 'opal/browser/canvas.rb', line 190

def draw_image(image, *args)
  if Canvas === image
    image = image.element
  else
    image = DOM(image)
  end

  if args.first.is_a?(Hash)
    source, destination = args

    `#@native.drawImage(#{image.to_n}, #{source[:x]}, #{source[:y]}, #{source[:width]}, #{source[:height]}, #{destination[:x]}, #{destination[:y]}, #{destination[:width]}, #{destination[:height]})`
  else
    case args.length
    when 0
      `#@native.drawImage(#{image.to_n}, 0, 0)`

    when 2
      `#@native.drawImage(#{image.to_n}, #{args[0]}, #{args[1]})`

    when 4
      `#@native.drawImage(#{image.to_n}, #{args[0]}, #{args[1]}, #{args[2]}, #{args[3]})`
    end
  end

  self
end

#fill(&block) ⇒ Object 



291
292
293
294
295
296
297
 
# File 'opal/browser/canvas.rb', line 291

def fill(&block)
  path(&block) if block

  `#@native.fill()`

  self
end

#gradient(*args, &block) ⇒ Object 



99
100
101
 
# File 'opal/browser/canvas.rb', line 99

def gradient(*args, &block)
  Gradient.new(self, *args, &block)
end

#height ⇒ Object 



57
58
59
 
# File 'opal/browser/canvas.rb', line 57

def height
  @element[:height].to_i
end

#height=(new_height) ⇒ Object 



65
66
67
 
# File 'opal/browser/canvas.rb', line 65

def height=(new_height)
  @element[:height] = new_height.to_i
end

#line(x1, y1, x2, y2) ⇒ Object 



150
151
152
153
 
# File 'opal/browser/canvas.rb', line 150

def line(x1, y1, x2, y2)
  move_to x1, y1
  line_to x2, y2
end

#line_to(x, y) ⇒ Object 



144
145
146
147
148
 
# File 'opal/browser/canvas.rb', line 144

def line_to(x, y)
  `#@native.lineTo(x, y)`

  self
end

#load(path) ⇒ Object 



73
74
75
76
77
78
79
80
81
82
83
84
 
# File 'opal/browser/canvas.rb', line 73

def load(path)
  promise = Promise.new
  image   = $document.create_element('img')

  image.on :load do
    promise.resolve(image)
  end

  image[:src] = path

  promise
end

#move_to(x, y) ⇒ Object Also known as: move 



136
137
138
139
140
 
# File 'opal/browser/canvas.rb', line 136

def move_to(x, y)
  `#@native.moveTo(x, y)`

  self
end

#off(*args, &block) ⇒ Object 



329
 
# File 'opal/browser/canvas.rb', line 329

def off(*args, &block); @element.off(*args, &block); end

#on(*args, &block) ⇒ Object 



327
 
# File 'opal/browser/canvas.rb', line 327

def on(*args, &block); @element.on(*args, &block); end

#one(*args, &block) ⇒ Object 



328
 
# File 'opal/browser/canvas.rb', line 328

def one(*args, &block); @element.one(*args, &block); end

#path(&block) ⇒ Object 



281
282
283
284
285
286
287
288
289
 
# File 'opal/browser/canvas.rb', line 281

def path(&block)
  `#@native.beginPath()`

  instance_eval(&block)

  `#@native.closePath()`

  self
end

#pattern(image, type = :repeat) ⇒ Object 



95
96
97
 
# File 'opal/browser/canvas.rb', line 95

def pattern(image, type = :repeat)
  `#@native.createPattern(#{DOM(image).to_n}, type)`
end

#point_in_path?(x, y) ⇒ Boolean

Returns:

  • (Boolean) 


315
316
317
 
# File 'opal/browser/canvas.rb', line 315

def point_in_path?(x, y)
  `#@native.isPointInPath(x, y)`
end

#quadratic_curve_to(cp1x, cp1y, x, y) ⇒ Object 



167
168
169
170
171
 
# File 'opal/browser/canvas.rb', line 167

def quadratic_curve_to(cp1x, cp1y, x, y)
  `#@native.quadraticCurveTo(cp1x, cp1y, x, y)`

  self
end

#rect(x, y, width, height) ⇒ Object 



155
156
157
158
159
 
# File 'opal/browser/canvas.rb', line 155

def rect(x, y, width, height)
  `#@native.rect(x, y, width, height)`

  self
end

#restore ⇒ Object 



130
131
132
133
134
 
# File 'opal/browser/canvas.rb', line 130

def restore
  `#@native.restore()`

  self
end

#rotate(angle, &block) ⇒ Object 



233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
 
# File 'opal/browser/canvas.rb', line 233

def rotate(angle, &block)
  if block
    save

    `#@native.rotate(angle)`

    instance_eval(&block)

    restore
  else
    `#@native.rotate(angle)`
  end

  self
end

#save ⇒ Object 



124
125
126
127
128
 
# File 'opal/browser/canvas.rb', line 124

def save
  `#@native.save()`

  self
end

#scale(x, y, &block) ⇒ Object 



249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
 
# File 'opal/browser/canvas.rb', line 249

def scale(x, y, &block)
  if block
    save

    `#@native.scale(x, y)`

    instance_eval(&block)

    restore
  else
    `#@native.scale(x, y)`
  end

  self
end

#stroke(&block) ⇒ Object 



299
300
301
302
303
304
305
 
# File 'opal/browser/canvas.rb', line 299

def stroke(&block)
  path(&block) if block

  `#@native.stroke()`

  self
end

#to_data(type = undefined) ⇒ Object 



319
320
321
 
# File 'opal/browser/canvas.rb', line 319

def to_data(type = undefined)
  `#{@element.to_n}.toDataUrl(type)`
end

#to_dom ⇒ Object 



323
324
325
 
# File 'opal/browser/canvas.rb', line 323

def to_dom(*)
  @element
end

#transform(m11, m12, m21, m22, dx, dy, &block) ⇒ Object 



265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
 
# File 'opal/browser/canvas.rb', line 265

def transform(m11, m12, m21, m22, dx, dy, &block)
  if block
    save

    `#@native.transform(m11, m12, m21, m22, dx, dy)`

    instance_eval(&block)

    restore
  else
    `#@native.transform(m11, m12, m21, m22, dx, dy)`
  end

  self
end

#translate(x, y, &block) ⇒ Object 



217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
 
# File 'opal/browser/canvas.rb', line 217

def translate(x, y, &block)
  if block
    save

    `#@native.translate(x, y)`

    instance_eval(&block)

    restore
  else
    `#@native.translate(x, y)`
  end

  self
end

#width ⇒ Object 



53
54
55
 
# File 'opal/browser/canvas.rb', line 53

def width
  @element[:width].to_i
end

#width=(new_width) ⇒ Object 



61
62
63
 
# File 'opal/browser/canvas.rb', line 61

def width=(new_width)
  @element[:width] = new_width.to_i
end