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.



13
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
 
# File 'opal/browser/canvas.rb', line 13

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.



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

def element
  @element
end

#style ⇒ Object (readonly)

Returns the value of attribute style.



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

def style
  @style
end

#text ⇒ Object (readonly)

Returns the value of attribute text.



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

def text
  @text
end

Instance Method Details

#append_to(parent) ⇒ Object 



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

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

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



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

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

  self
end

#begin ⇒ Object 



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

def begin
  `#@native.beginPath()`

  self
end

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



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

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 



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

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 



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

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

  `#@native.clip()`

  self
end

#close ⇒ Object 



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

def close
  `#@native.closePath()`

  self
end

#curve_to(*args) ⇒ Object 



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

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 



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

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 



189
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
 
# File 'opal/browser/canvas.rb', line 189

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 



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

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

  `#@native.fill()`

  self
end

#gradient(*args, &block) ⇒ Object 



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

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

#height ⇒ Object 



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

def height
  @element[:height].to_i
end

#height=(new_height) ⇒ Object 



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

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

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



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

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

#line_to(x, y) ⇒ Object 



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

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

  self
end

#load(path) ⇒ Object 



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

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 



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

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

  self
end

#off(*args, &block) ⇒ Object 



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

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

#on(*args, &block) ⇒ Object 



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

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

#one(*args, &block) ⇒ Object 



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

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

#path(&block) ⇒ Object 



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

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

  instance_eval(&block)

  `#@native.closePath()`

  self
end

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



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

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

#point_in_path?(x, y) ⇒ Boolean

Returns:

  • (Boolean) 


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

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

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



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

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

  self
end

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



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

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

  self
end

#restore ⇒ Object 



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

def restore
  `#@native.restore()`

  self
end

#rotate(angle, &block) ⇒ Object 



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

def rotate(angle, &block)
  if block
    save

    `#@native.rotate(angle)`

    instance_eval(&block)

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

  self
end

#save ⇒ Object 



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

def save
  `#@native.save()`

  self
end

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



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

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 



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

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

  `#@native.stroke()`

  self
end

#to_data(type = undefined) ⇒ Object 



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

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

#to_dom ⇒ Object 



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

def to_dom(*)
  @element
end

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



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

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 



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

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 



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

def width
  @element[:width].to_i
end

#width=(new_width) ⇒ Object 



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

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