maxkrieger / aframe-draw-component Goto Github PK

Would it be faster to set the texture directly from the canvas by manipulating the Object3D.material?

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?

Getting CORS errors. Is there a workaround?

I tried sending the data URL to an <img> with crossorigin, and then reading from that, but that didn't work.

npm run dist should build dist files so we can download droppable files into HTML.

Hi,

The components works perfectly if using aframe-core, as you have in your package
"aframe-core": "0.1.2",
but the with the latest aframe branch
"aframe": "aframevr/aframe#dev"
The canvas is not drawn on the entity and I didn't get any message on the console about it.

I want to do it by es6 import:

import 'aframe'
import 'aframe-draw-component'

but I fount that It didn't add draw in AFRAME components.
How to import it and use it with advanced usage?