keyten / graphics2d Goto Github PK

View Code? Open in Web Editor NEW

37.0 4.0 3.0 3.12 MB

JS canvas library

Home Page: http://graphics2d.js.org

License: MIT License

JavaScript 100.00%

graphics2d's Introduction

Graphics2D JavaScript Library

Note: Graphics2D 2.0 will be renamed to DeltaJS.

Graphics2D is a javascript library available under the MIT License.

Install with bower

bower install graphics2d

Or use as a script

Just download graphics2d.min.js, put into your project folder and attach to your page:

<script src="./js/graphics2d.min.js"></script>

Then use

<canvas id="cnv" width="600" height="400"></canvas>

var ctx = Delta.query('#cnv');

// draw a red rect
ctx.rect({
    x: 100,
    y: 100,
    width: 50,
    height: 50,
    fill: 'red'
});

Documentation

graphics2d's People

Contributors

Stargazers

Watchers

Forkers

miker059 saucebwz anastasiiared

graphics2d's Issues

isPointIn and bounds methods with transform

Must be redefined in child classes with super function call after.

Animation of moving along a path / curve

With / without rotation.

Native size for image

var image = ctx.image(im, x, y, width, 'native');
// ==
var image = ctx.image(im, x, y, width, im.height);

The `super` function in classes doesn't work from the 2nd override

new Class(Circle, {
  initialize: function(){
    this.super('initialize', arguments);
  }
});

The Circle::initialize has the same super so it'll call itself again.

Shape bounds: transform, stroke...

var text = ctx.text( 'Hello, world', x, y, fill ),
    b = text.bounds({ transform: true / false (default - true), stroke: true / false / 'exclude' (default - false) });
b.ltx, rtx, lbx, rbx, lty, rty, lby, rby // -- corners of the transformed shape
b.x1, y1, x2, y2, width, height // -- corners of the transformed shape bounds

More curves & curves utils

More curves (Catmull-Rom, BSplines, Lagrange approx poly, bezier of custom power). Including relative and shorthand curves.
Curves utils.
Path utils based on curves utils.
Special utils for bezier (& catmull based on converting to bezier).
Possibly, bezier curves with weight of points?

Clip doesn't works with paths

var rect = ctx.rect(10, 10, 200, 200, 'red', 'green 5px');
rect.clip( ctx.path('M10,10 L200,200 L10,200') );

Benchmarks

Todo: test what variation is faster
And use it everywhere in the lib.

Priority: webkit, firefox, edge.

Checking the property existence: hasOwnProperty, prop in obj, obj[prop] !== undefined.

The list is to update.

Add definitions for TypeScript & Flow

Abstract shapes

var rect = Graphics2D.rect(10, 10, 200, 200);
ctx.push(rect);

Finish the Core

The current idea:

DeltaJS (Graphics2D 2.0) will include:

Core
More
Physics
Geometry
WebGL

Image filling

var tex = new Image;
tex.src = 'http://url';
ctx.rect(10, 10, 200, 200, tex);
// ==
ctx.rect(10, 10, 200, 200, 'http://url');

Deleting values with object.stroke

object.stroke({ width: 5, color: 'black', dash: null });

Test drawing in reverse order with composite

How about drawing all the objects with dest-over composite in reverse order?

It will break all the composites and maybe opacity, but it may be very faster (the browser doesn't have to calculate the pixels behind other obs).

Shape::corner

Move the util.corner function to Shape class.

Add offsets:

shape.corner({
 from: 'top left',
 x: 10
});

Note: the corner function is using in the transforms and gradients.

New specifications support

Text bounds: https://html.spec.whatwg.org/multipage/scripting.html#dom-textmetrics-actualboundingboxleft
Will hit regions (with hash functions?) work faster than getObjectInPoint in events?

Animation with RAF

Animation with requestAnimationFrame instead of setInterval.

New Style class

Converts Graphics2D style to 2DContext style.

Add dirty rectangles support

(update only changed areas, not the whole canvas)

Animation with relative values

shape.animate( 'x', '+=10pt' );

FillRule for paths

Algo:

Stroke the path.
Divide the path to even & odd parts.
Fill them or not.
(maybe, custom functions deciding whether the part must be filled)

Canvas transforms

ctx.translate(10, 10);
ctx.rotate(45, 'center');

Use distance function everywhere in core

Compare minimizers and choose the best

http://compressorrater.thruhere.net/
:)

Two transform modes

free: there's a matrix and the methods scale, rotate, skew, translate, transform change it with any pivot.
strict: the matrix is generated from scale, rotate, skew, translate attrs with scalePivot, rotatePivot, skewPivot.

The matrix is in transform attr.

To think about: abstract position

Position of the element do not have to be cartesian coords always.
Now:

ctx.rect(x, y, width, height, fill, stroke);

To think about:

// polar coords
ctx.rect({ angle: 90, length: 50 }, width, height, fill, stroke);
// in-hex-engine coords
var hexEngine = ...
ctx.rect({ engine: hexEngine, r: 0, g: 0, b: 0 }, width, height, fill, stroke);
// maybe table-like, row-like, col-like, flex-line engines? with margins, paddings and etc

in Delta.More ofc.

It is neccessary to find out is v8 able to optimize functions passing arguments ob to another function. And think when is it neccessary to convert coords when init.
Maybe additional predraw function for calculating position?

Multiple binds

shape.on({
 click: listener1,
 mouseover: listener2
});

Shape::events

Make possible to enable / disable mouse processing for a shape.

shape.events(false);

CocoonJS and Ejecta support

Serialize

ctx.upload('file.json');

Bug with bounds on rasterizing

ctx.rect(100, 100, 100, 100, {
    colors: ['red', 'green', 'blue'],
    from: 'top',
    to: 'bottom'
}).rotate(45).remove().rasterize();

Destructuring from attr

Attr must be able to return array with values.

var [x, y] = object.attr(['x', 'y']);

Animate transform with custom pivot

shape.animate({
    rotate: [angle, 'pivot']
    // or rotatePivot parameter
});

EditorTransform

Canvas coords & scrolled page

Coordinates are incorrect when the page scrolled.

Color animation

Write tests

Mask changing bug

element.clip(100, 100, 50)
       .clip().rotate(30);