https://github.com/geyang/react-bristol

a react canvas paint component
https://github.com/geyang/react-bristol

Last synced: 4 months ago
JSON representation

a react canvas paint component

• Host: GitHub
• URL: https://github.com/geyang/react-bristol
• Owner: geyang
• Created: 2016-09-11T02:47:47.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-02-02T00:29:18.000Z (over 8 years ago)
• Last Synced: 2025-01-10T12:58:12.071Z (5 months ago)
• Language: JavaScript
• Homepage: www.episodeyang.com/react-bristol
• Size: 1.15 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


React Bristol (Board)



A HTML5 canvas component supporting Apple Pencil and force touch.

This is a quick proof-of-concept component I built to test out the performance of mobile safari's

input events, to see if I can build a Apple Pencil note taking app that lives inside the browser.

At the moment, the touch events mobile safari emits have integer coordinates, making the inputs

a bit jagged The input event frequency is also on the lower side.

There is currently a ticket in webkit that changes the input coordinates to double. Not sure

when it will land though.

We might be able to use a simple neural net to de-jag the hand writing.



[ ] todo: need to publish as npm module.



Usage and Live Demo: Bristol



showing basic pointer events and force detection (with force touch and apple pencil)



Props

This table below is generated automatically

Prop NameTypeIs RequiredDefault ValueDescriptionwidthnumberoptionalnoneheightnumberoptionalnonerenderRationumberoptional3onImageUpdatefuncoptionalnone

Usage Example

The source code below of the example above is loaded using the webpack raw loader.

/** Created by ge on 6/23/16. */

import React, {Component} from "react";

import autobind from 'autobind-decorator';

import Bristol from "./Bristol";


const style = {

  border: '10px solid pink'

};

export default class HappySandwichMakerExample extends Component {

  @autobind

  saveImage(image) {

    // do something with image

  }

  render() {

    return (

      <Bristol width={1000}

               height={400}

               style={style}

               onImageUpdate={this.saveImage}

      />

    );

  }

}



Develop

After cloning from gitHub, you can run the example by doing

npm run serve-docs



And then open your browser at http://localhost:5000.