cycle-canvas - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

lib/canvas-driver.js

		@@ -44,7 +44,7 @@ 'use strict';

		postDrawHooks(context);

		element.children && element.children.forEach(function (child) {
		return renderElement(context, child, element);
		});

		postDrawHooks(context);
		}
		@@ -116,13 +116,19 @@

		if (element.translate) {
		context.translate(element.translate.x, element.translate.y);
		if (!element.transformations) {
		return;
		}

		if (element.rotate) {
		context.rotate(element.rotate);
		}
		element.transformations.forEach(function (transformation) {
		if (transformation.translate) {
		context.translate(transformation.translate.x, transformation.translate.y);
		}

		if (element.scale) {
		context.scale(element.scale.x, element.scale.y);
		}
		if (transformation.rotate) {
		context.rotate(transformation.rotate);
		}

		if (transformation.scale) {
		context.scale(transformation.scale.x, transformation.scale.y);
		}
		});
		}
		@@ -129,0 +135,0 @@

package.json

		{
		"name": "cycle-canvas",
		"version": "0.1.0",
		"version": "0.2.0",
		"description": "A canvas driver for Cycle.js",
		@@ -5,0 +5,0 @@ "main": "lib/canvas-driver.js",

README.md

		@@ -190,3 +190,3 @@ # cycle-canvas
		##Transformations
		Transformations are added as attributes to drawing shapes and text.
		Transformations are added as a list to the `transformations` attribute to drawing shapes and text.

		@@ -200,3 +200,5 @@ ### <a id="translate"></a> `translate: {x: number, y: number}`
		rect({
		translate: {x: 10, y: 10},
		transformations: [
		{translate: {x: 10, y: 10}}
		],
		x: 100,
		@@ -219,3 +221,5 @@ y: 100,
		rect({
		rotate: (20*Math.PI/180),
		transformations: [
		{rotate: (20*Math.PI/180)}
		],
		x: 10,
		@@ -238,3 +242,5 @@ y: 10,
		rect({
		scale: {x: 2, y: 2},
		transformations: [
		{scale: {x: 2, y: 2}},
		],
		x: 10,
		@@ -249,1 +255,22 @@ y: 10,
		```

		### Combining transformations

		#### Example:

		Rotate aroung the point (100, 100) and draw a 50x50px box centered there:
		```js
		rect({
		transformations: [
		{translate: {x: 100, y: 100}},
		{rotate: (20*Math.PI/180)}
		],
		x: -25, // At this point, {x: 0, y: 0} is a point on position {x: 100, y: 100} of the canvas
		y: -25,
		width: 50,
		height: 50,
		draw: [
		{fill: 'purple'}
		]
		})
		```

New alerts