Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shuding/apple-pencil-safari-api-test

Canvas based sketch board, with force touch and real-time Bezier curves.
https://github.com/shuding/apple-pencil-safari-api-test

3d-touch apple-pencil bezier canvas force-touch javascript sketching

Last synced: 10 days ago
JSON representation

Canvas based sketch board, with force touch and real-time Bezier curves.

Host: GitHub
URL: https://github.com/shuding/apple-pencil-safari-api-test
Owner: shuding
Created: 2016-04-13T18:30:17.000Z (over 8 years ago)
Default Branch: gh-pages
Last Pushed: 2022-02-12T09:38:48.000Z (over 2 years ago)
Last Synced: 2024-10-22T16:43:08.323Z (19 days ago)
Topics: 3d-touch, apple-pencil, bezier, canvas, force-touch, javascript, sketching
Language: JavaScript
Homepage: https://shuding.github.io/apple-pencil-safari-api-test
Size: 328 KB
Stars: 454
Watchers: 14
Forks: 55
Open Issues: 2
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        ![Screenshot](demo.jpg)

3D Touch / Force Touch API Demo

A canvas demo featuring:

- __Apple Pencil__ and __3D Touch__ pressure detection

- smooth Bezier curve drawing

In vanilla JS. Tested in Safari & Google Chrome on iOS 9.3.

[Demo](http://shuding.github.io/apple-pencil-safari-api-test) | [Code](https://github.com/shuding/apple-pencil-safari-api-test/blob/gh-pages/index.html).

__Help me test on Android/Windows/macOS devices and leave an issue please!__

|API |Capability (Apple devices with iOS 9)|Capability (Apple devices with iOS 13)|

|---|---|---|

|force|:white_check_mark:|:white_check_mark:|

|radiusX|:x:|:white_check_mark:|

|radiusY|:x:|:white_check_mark:|

|rotationAngle|:x:|:question:|

|touchType|:question:|:white_check_mark:|

|altitudeAngle|:question:|:white_check_mark:|

|azimuthAngle|:question:|:white_check_mark:|

To visualize `altitudeAngle` and `azimuthAngle` (source: [Apple](https://developer.apple.com/documentation/uikit/touches_presses_and_gestures/illustrating_the_force_altitude_and_azimuth_properties_of_touch_input)):

![Apple Pencil](apple-pencil.png)

## Related Resources

1. [Touch Events - Level 2, W3C Draft](https://w3c.github.io/touch-events/#widl-Touch-force)

2. [The `Touch` Object on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Touch)

3. [`radiusX`](https://developer.mozilla.org/en-US/docs/Web/API/Touch/radiusX)

4. [Illustrating the Force, Altitude, and Azimuth Properties of Touch Input](https://developer.apple.com/documentation/uikit/touches_presses_and_gestures/illustrating_the_force_altitude_and_azimuth_properties_of_touch_input)

## Pointer Events & Polyfills

- [Pointer Events on W3C](https://www.w3.org/TR/pointerevents/#h2_intro)

- [Microsoft Edge](https://msdn.microsoft.com/en-us/library/dn433244%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396)

- Hand.js -> [jQuery PEP](https://github.com/jquery/PEP).

- MSPointerXXX: [MSDN Blog](https://blogs.msdn.microsoft.com/eternalcoding/2013/02/20/hand-js-a-polyfill-for-supporting-pointer-events-on-every-browser/)