maxkrieger / aframe-draw-component

HTML5 canvas component for AFrame VR.
http://a9.io/aframe-draw-component/
57 stars 8 forks source link

not updating element #8

Open bknill opened 6 years ago

bknill commented 6 years ago

Hi,

Great component.. thanks.

I've picked this up from en existing project and I'm trying to enable updating an element, This component is working the first time, but after I try and update it just turns into a white box.

Here is my component:

`AFRAME.registerComponent('hotspots-button', {
  dependencies: ['draw'],
  schema: {
    text: {type: 'string', default: ''},
    icon: {type: 'string', default: ''},
  },
  _imageURL: '',

  init: function() {
    this.draw = this.el.components.draw
    this.draw.register(this.render.bind(this))

  },

  update: function () {
    this.draw.render()
    this.el.children[0].setAttribute('src', this._imageURL)
  },

  render: function () {
    let ctx = this.draw.ctx
    let canvas = this.draw.canvas
    blackCurvedImage(canvas, ctx, canvas.width, canvas.height, this.data.text)
    this._imageURL = canvas.toDataURL('image/png',1.0)
  },
})`

The blackCurvedImage function makes the changes to the canvas i.e.

export function blackCurvedImage(canvas, ctx, width, height, text) {
  // Clean context
  ctx.clearRect(0, 0, width, height)
  // Container
  ctx.strokeStyle = classicWhiteOutlineRGBA
  ctx.fillStyle = classicBlackFillRGBA
  roundRect(ctx, 0, 0, width, height, 20, true) 
...

However changes are not being reflected.

Currently it's just turning the canvas white.

Any ideas on how to manage updates?

maxkrieger commented 6 years ago

Hi, Apologies, it's been a while since I updated this repo, and it's not as simple to use as I remember.

I'm not sure why you're manually setting the image data URI. Have you tried commenting out this._imageURL usage?