canvas2d-wrapper
v1.7.2
Published
A React Wrapper to use HTML5 canvas with mouse move and zoom abilities.
Downloads
355
Readme
canvas2d-wrapper
A React Wrapper to use HTML5 canvas with mouse move and zoom abilities.
Do you want an example app made with this library ? Check out my game Alchemistry on Steam or on itch.io.
Install
npm install --save canvas2d-wrapper
Usage
import React from 'react';
/* eslint-disable no-console */
/* eslint-disable no-magic-numbers */
import { Canvas2D, CanvasImage, Circle, Polygon, Rect } from 'canvas2d-wrapper';
import 'canvas2d-wrapper/dist/index.css';
const elements = [];
for(let i = 0; i < 998; i++) {
let object = null;
if(Math.random() > 0.5) {
object = new Rect({
id: i,
x: 500 - Math.round(Math.random() * 1000),
y: 500 - Math.round(Math.random() * 1000),
width: 32,
height: 32,
fill: (Math.random() > 0.5) ? 'black' : undefined,
stroke: (Math.random() > 0.5) ? 'black' : undefined,
draggable: true
});
} else {
object = new Circle({
id: i,
x: 500 - Math.round(Math.random() * 1000),
y: 500 - Math.round(Math.random() * 1000),
radius: 16,
fill: (Math.random() > 0.5) ? 'black' : undefined,
stroke: (Math.random() > 0.5) ? 'black' : undefined
});
}
if(!object.fill && !object.stroke) {
object.fill = 'green';
}
elements.push(object);
}
const points = [];
for(let i = 0; i < 5; i++) {
points.push({
x: 500 - Math.round(Math.random() * 1000),
y: 500 - Math.round(Math.random() * 1000),
});
}
const polygon = new Polygon({
id: 'poly',
points,
stroke: 'red',
});
elements.push(polygon);
const polygon2 = new Polygon({
id: 'poly',
points,
fill: 'orange',
zIndex: -1,
});
elements.push(polygon2);
const App = () => {
return (
<Canvas2D
id="MyCanvas"
width={1200}
height={700}
minZoom={0.25}
maxZoom={4}
tileSize={1}
deltaLeft={100}
deltaTop={100}
onClick={(e) => {
console.log('Click event:', e);
}}
onRightClick={(e) => {
console.log('Right click event:', e);
}}
onHover={(e) => {
console.log('Hover event:', e);
}}
onElementMoved={(elt, x, y) => {
console.log('Moved element:', elt, x, y);
}}
onWheel={(e) => {
console.log('Wheel event:', e);
}}
onFrame={(e) => {
return elements;
}}
dragObjects={true}
/>
);
};
export default App;
License
MIT © Elanis