The easel-gwt from timknip

Easel-GWT
======================================

Easel-GWT is a GWT port of EaselJS : http://easeljs.com/

NOTE
======================================
The code is still in alpha and not much tested.
Hence there might be bugs, problems and performance issues.
The architecture is still in flux and will probably change in the future.
So beware!

USAGE
======================================
1] Add the jar in the /bin directory to your classpath.
2] In your module.gwt.xml add: <inherits name='easeljs.EaselJS'/>

EXAMPLE http://easel-gwt.appspot.com/
======================================
package com.floorplanner.easeljs.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;

import easeljs.client.EaselJS;
import easeljs.client.display.Container;
import easeljs.client.display.Graphics;
import easeljs.client.display.Shadow;
import easeljs.client.display.Shape;
import easeljs.client.display.Stage;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class EaseljsTest implements EntryPoint {
	
	private float angle = 0;
	
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		DockLayoutPanel panel = new DockLayoutPanel(Unit.PX);
		
		EaselJS easel = new EaselJS(640, 480);
		
		panel.add(easel);
		
		RootLayoutPanel.get().add(panel);
		
		test(easel);
		
		RootLayoutPanel.get().animate(500);
	}
	
	private void test(EaselJS easel) {
		final Stage stage = easel.getStage();
		Container container = easel.getContainer();
		final Container center = new Container();
			
		Shape shape = new Shape();
		Graphics graphics = shape.getGraphics();
		
		center.addChild(shape);
		
		graphics.beginFill("#ff0000")
			.moveTo(-50, -50)
			.lineTo( 50, -50)
			.lineTo( 50,  50)
			.lineTo(-50,  50)
			.endFill();
	
		shape.cache(-50, -50, 100, 100);
		
		final Shape clone = (Shape) shape.clone();
		clone.setRotation(45);
		clone.setX(140);
		clone.setY(140);
		clone.setShadow(new Shadow("#000000", 20, 20, 10));
		
		center.addChild(clone);
		container.addChild(center);
		
		clone.cache(-50, -50, 100, 100);
		
		Timer timer = new Timer() {
			
			public void run() {
				center.setRotation(angle);
				stage.tick();
				angle++;
			}
		};
		
		timer.scheduleRepeating(10);
	}
}

===================================================
The EaseljsTest.gwt.xml :
===================================================
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='easeljstest'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->
	
  <!-- Other module inherits                                      -->
  <inherits name='easeljs.EaselJS'/> 
  
  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.floorplanner.easeljs.client.EaseljsTest'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>

</module>

timknip / easel-gwt Goto Github PK

easel-gwt's Introduction

easel-gwt's People

Contributors

Stargazers

Watchers

Forkers

easel-gwt's Issues

gwt.xml file example in READ-ME didn't work for me.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent