Canvas component?

Hi,

First of all great library! I decided to use it in a tool I just started and so far so good.

Do you plan to support a Canvas component?

Kr

Hi,

Yeah, this is certainly id like to add / abstract into haxeui-core. The last comment here outlines how i think i would like to do it: https://github.com/haxeui/haxeui-core/issues/108

To save you a few clicks :wink: :


I have a general idea for this, here is my outline (im only detailing openfl and html5 here, but the same idea applies to all):

  • CanvasView extends Component to become part of the haxeui-core system, this in turn extends ComponentBase that lives in the backend.
    • haxeui-html: ComponentBase contains an DOMElement use as a surface
    • haxeui-openfl: ComponentBase extends Sprite to use itself as a surface
  • A new Graphics class that will extend GraphicsBase that lives in the backend (as most backend type classes do)
    • Unlike most haxeui classes Graphics will take in a constructor param that is a haxeui Component, it will pass this up to the parent class (GraphicsBase)
    • Graphics will expose draw calls and simply pass them up to the parent class
  • CanvasView will encapsulate a Graphics instance and use this to acheive draw calls
  • CanvasView itself will be available to xml UIs, but actually drawing to it can only be done in code / script

Example Impl:

haxeui-core:

class Graphics extends GraphicsBase {
	public function new(component:Component) {
		super(component);
	}

	public function line(x1, y1, x2, y2) {
		super.line(x1, y1, x2, y2);
	}
}

class CanvasView extends Component {
	public function new() {
		_graphics = new Graphics(this);
	}

	public function line(x1, y1, x2, y2) {
		_graphics.line(x1, y1, x2, y2);
	}
}

haxeui-html5:

class GraphicsBase {
	public function new(component:Component) {
		_component = component;
	}

	public function line(x1, y1, x2, y2) {
		var context = _component.element.getContext("2d");
		context.beginPath();
		context.moveTo(x1, y1);
		context.lineTo(x2, y2);
		context.stroke();
	}
}

haxeui-openfl:

class GraphicsBase {
	public function new(component:Component) {
		_component = component;
	}

	public function line(x1, y1, x2, y2) {
		var graphics = _component.graphics;
		graphics.moveTo(x1, y1);
		graphics.lineTo(x2, y2);
	}
}

Thanks for the info!