(p5.Element.obj).drop

def setup 
  c = createCanvas(100, 100)
  background(200)
  textAlign(CENTER)
  text('drop file', width / 2, height / 2)
  c.drop do |file|
    file = Native(`file`)
    background(200)
    text('dropped file:', width / 2, height / 2)
    text(file.name, width / 2, height / 2 + 40)   # ファイル名を表示
  end
end
def setup 
  c = createCanvas(100, 100)
  background(200)
  textAlign(CENTER)
  text('drop image', width / 2, height / 2)
  c.drop do |file|
    file = Native(`file`)
    @img = createImg(file.data, '').hide   # <img>要素を生成
  end
end

def draw 
  if (@img)
    image(@img, 0, 0, width, height)       # <img>要素を描画
  end
end

p5.jsリファレンス(参考情報)

[p5.js] (p5.Element.obj).drop

概要

ファイルが要素上にドロップされたときに実行する処理を登録します。

書式

drop do |file| ... end

引数

引数名内容備考オプションデフォルト値
...ブロック実行する処理

戻値

なし

備考

・ブロック引数として fileオブジェクトを受け取りますが、
 rbCanvas/p5上でこのオブジェクトを扱うためには Nativeメソッドでの変換が必要です。

関連

(p5.Element.obj).dragOver
(p5.Element.obj).dragLeave
Native