react-sketch

react-sketch

https://github.com/tbolis/react-sketch

Sketch Tool for React-based applications, backed up by FabricJS

 

tbolis.github.io/showcase/react-sketch/

 

import {SketchField, Tools} from 'react-sketch';

class SketchFieldDemo extends React.Component {
     render() {
        return (
            <SketchField width='1024px' 
                         height='768px' 
                         tool={Tools.Pencil} 
                         lineColor='black'
                         lineWidth={3}/>
        )
     }
}

 

 

 

 

API

https://github.com/fanqingsong/react-sketch

SketchField Methods

Name	Description
enableTouchScroll	Enable touch Scrolling on Canvas
disableTouchScroll	Disable touch Scrolling on Canvas
addImg	Add an image as object to the canvas
zoom	Zoom the drawing by the factor specified
undo	Perform an undo operation on canvas, if it cannot undo it will leave the canvas intact
redo	Perform a redo operation on canvas, if it cannot redo it will leave the canvas intact
canUndo	Delegation method to check if we can perform an undo Operation, useful to disable/enable possible buttons
canRedo	Delegation method to check if we can perform a redo Operation, useful to disable/enable possible buttons
toDataURL	Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately
toJSON	Returns JSON representation of canvas
fromJSON	Populates canvas with data from the specified JSON.
clear	Clear the content of the canvas, this will also clear history but will return the canvas content as JSON to be used as needed in order to undo the clear if possible
hasSelection	get if object has been selected.
clearSelection	clear the selection of the selected object.
removeSelected	Remove selected object from the canvas
copy	copy the selected object.
paste	make a new object copy from the selected object.
setBackgroundFromDataUrl	set data url as background.
addText	add one text on canvas.

 

Available tools

Tool	Description
Pencil	Free drawing pencil
Line	Gives you the ability to draw lines
Rectangle	Create rectangles
Circle	Create circles
Rectangle	Create Rectangles
Select	Disables drawing and gives you the ability to modify existing elements in the canvas
Pan	Disables drawing and gives you the ability to move the complete canvas at will, useful to adjust the canvas when zooming in or out (thank you wmaillard)

 

Configuration Options

Option	Type	Default	Description
tool	Enumeration (string)	pencil	The tool to use, can be select, pencil, circle, rectangle, pan
lineColor	String	black	The color of the line
lineWidth	Number	1	The width of the line
fillColor	String	transparent	The fill color (hex format) of the shape when applicable (e.g. circle)
backgroundColor	String	transparent	The the background color of the sketch in hex or rgba
undoSteps	Number	15	number of undo/redo steps to maintain
imageFormat	String	png	image format when calling toDataURL, can be png or jpeg
width	Number	No Value(null)	Set/control the canvas width, if left empty the sketch will scale to parent element
height	Number	512	Set/control the canvas height, if left empty the sketch will take a reasonable default height
value	JSON		Property to utilize and handle the sketch data as controlled component
defaultValue	JSON		Default initial data, to load. If value is set then value will be loaded instead
widthCorrection	Number	2	Specify some width correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style
heightCorrection	Number	0	Specify some height correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style

 

fabric

http://fabricjs.com/fabric-intro-part-1

fabric接口更加简单，面向对象，更好理解。

Canvas allows us to create some absolutely amazing graphics on the web these days. But the API it provides is disappointingly low-level. It's one thing if we simply want to draw few basic shapes on canvas and forget about them. But as soon as there's need for any kind of interaction, change of picture at any point, or drawing of more complex shapes — situtation changes dramatically.

Fabric aims to solve this problem.

 

DEMO

 

 

原生canvas API

// reference canvas element (with id="c")
var canvasEl = document.getElementById('c');

// get 2d context to draw on (the "bitmap" mentioned earlier)
var ctx = canvasEl.getContext('2d');

// set fill color of context
ctx.fillStyle = 'red';

// create rectangle at a 100,100 point, with 20x20 dimensions
ctx.fillRect(100, 100, 20, 20);

 

fabric API

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);