https://github.com/easonzero/primitive
JS port of primitive.lol && work on ondras/primitive.js
https://github.com/easonzero/primitive
Last synced: about 1 month ago
JSON representation
JS port of primitive.lol && work on ondras/primitive.js
- Host: GitHub
- URL: https://github.com/easonzero/primitive
- Owner: Easonzero
- Created: 2018-11-06T10:21:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T19:31:52.000Z (about 2 years ago)
- Last Synced: 2025-03-24T10:56:27.308Z (about 2 months ago)
- Language: JavaScript
- Size: 475 KB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# primitive.js
[](https://996.icu/#/zh_CN)
A JavaScript re-creation of the [primitive.lol](http://primitive.lol/) application.
This project works on the ondras/primitive.js, and you can learn more about primitive.js in [primitive.js](https://github.com/ondras/primitive.js)
## What is the difference between this project and ondras/primitive.js
This project works on the ondras/primitive.js, adding some features to that.
- rotatable rectangle
- bezier and straight line
- heart shape
- shapes cache exported by pre-calculating
- packed by rollup.js and provide some interfaces used by your program
- no svg
## Example Usage
```
npm install Easonzero/primitive
```
```js
// require the library will define a primitive `global`
require ('primitive')
let image = 'test.jpg';
let cfg = primitive.DefaultConfig();
// declare the type of shapes our drawing will use:
cfg.shapeTypes = [
primitive.ShapeMap.Bezier,
primitive.ShapeMap.Rectangle,
primitive.ShapeMap.Triangle,
primitive.ShapeMap.Ellipse,
primitive.ShapeMap.Heart,
primitive.ShapeMap.Line
]
cfg.shapes = 500
primitive.Pure(image, cfg).then(function(ori){
let optimizer = new primitive.Optimizer(ori, cfg);
let dst = primitive.Canvas.empty(cfg);
// select element to append the canvas to
document.querySelector("#result")!.innerHTML = "";
document.querySelector("#result")!.appendChild(dst.node);
// draw on dst.node canvas on each step
optimizer.onStep = function (step){
console.log('onStep', step);
dst.drawStep(step);
}
// drawing finished
optimizer.onEnd = function (state){
console.log('onEnd', state);
}
optimizer.start();
});
```