aframe-draw-component
aframe-draw-component copied to clipboard
not updating element
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?
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?