AFrame Draw Component

HTML5 canvas as a material for an A-Frame VR entity.

Fully extendable with components which utilize the canvas api.

Note: if you can't get the component to work with the latest A-Frame version, check out Mayo's shader variations.

Installation

npm i aframe-draw-component --save

##Usage

var AFRAME = require("aframe-core");
var draw = require("aframe-draw-component").component;
AFRAME.registerComponent("draw", draw);

Then, you can implement it with third party components which utilize the draw component. Just put it after the draw prop, like this example using a square component:

<a-entity position="0 1 0" geometry="primitive: box" draw="width: 256; height: 256" square="text: Hello">
</a-entity>

Or, if you want direct access to the Canvas API, write a quick component yourself:

AFRAME.registerComponent("square", {
	dependencies: ["draw"],

	update: function() {
		var draw = this.el.components.draw; //get access to the draw component
		var ctx = draw.ctx;
		var canvas = draw.canvas;
		ctx.fillStyle = "#AFC5FF";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		ctx.fillStyle = "blue";
		ctx.fillRect(68, 68, 120, 120);
		ctx.fillStyle = "white";
		ctx.font = "36px Georgia";
		ctx.fillText(this.data.text, 80, 140);
		draw.render(); //tell it to update the texture
	}
});

Note: the example above is not ideal for third-party components, or when you're using multiple components in your project which use draw. See below:

##Advanced Usage & Render Binding

When writing a generic third party component, you will more than likely want to re-render the canvas. This may also require a clearing of the canvas itself. Because of this, it's imperative that every third party component encapsulate their use of the canvas into their own local render functions, and then register these functions into draw.

draw can then put every component into a call stack, and then re-render each component in the exact order that they were placed in. This also potentially allows for layering, although a-frame can handle this on its own using component updates pretty well.

An example of this uses Object.bind:

AFRAME.registerComponent("square", {
	dependencies: ["draw"],
	init: function() {
		this.draw = this.el.components.draw;
		this.draw.register(this.render.bind(this));
	},
	update: function () {
		this.draw.render();
	},
	render: function () {
		var ctx = this.draw.ctx;
		var canvas = this.draw.canvas;
		ctx.fillStyle = "#AFC5FF";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
		ctx.fillStyle = this.data.color;
		ctx.fillRect(68, 68, 120, 120);
	}
});

AFRAME.registerComponent("greeting", {
	dependencies: ["draw"],
	init: function() {
		this.draw = this.el.components.draw;
		this.draw.register(this.render.bind(this));
	},
	update: function () {
		this.draw.render();
	},
	render: function () {
		var ctx = this.draw.ctx;
		ctx.fillStyle = "white";
		ctx.font = "36px Georgia";
		ctx.fillText(this.data.text, 80, 140);
	}
});

After each component is initialized, it registers its own render function with draw. If its own data is changed (within the update function), it will tell draw to re-render the entire canvas, and call both the square and greeting's render functions in order.

##Methods & Component Properties

These are only needed for writing your own components which utilize draw.

Property	Description
`.canvas`	hidden canvas to perform methods on
`.ctx`	hidden ctx to perform methods on
`.register([func] render)`	add your component's own `render` function to the registry so that it will re-render on any render call.
`.render()`	update the material with the new canvas

##Properties

Property	Description
`width`	width of canvas (should match ratio of a face of the entity)
`height`	height of canvas (should match ratio of a face of the entity)
`background`	background color of canvas

##Featured Components

Text Wrap - full text wrapping
HTML Texture - render html as a texture (!!!)

##Additional Info

Thanks to ngokevin and RangerMauve for their help.
As this is meant to be an extendable component, PR's to the readme are welcome.

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?

maxkrieger / aframe-draw-component Goto Github PK