arch-inc / fabricjs-psbrush Goto Github PK

View Code? Open in Web Editor NEW

62.0 6.0 24.0 1.66 MB

Fabric.js用の感圧ブラシ実装 / A lightweight pressure-sensitive brush implementation for Fabric.js

Home Page: https://arch-inc.github.io/fabricjs-psbrush/

License: Other

TypeScript 96.74% JavaScript 3.26%

fabricjs fabricjs-psbrush techbookfest techbookfest8 fabric

fabricjs-psbrush's People

Contributors

Stargazers

Watchers

fabricjs-psbrush's Issues

Not getting brush to work with touch/stylus on Firefox (Windows 10)

Hi
I am trying to incorporate your cool brush into a drawing code I am working on which is based on fabric.js. I have been having some problems, so I tried to create a simple case based on your example as seen below...

<!DOCTYPE html>
<html>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@arch-inc/[email protected]/dist/index.min.js"></script>
<body>
	<canvas id="c" width="600" height="400"></canvas>
<script> 
  // Create a Fabric.js canvas
  let canvas = new fabric.Canvas(document.getElementById("c"), {
    isDrawingMode: true,
    enablePointerEvents: true
  });

  // Initialize a brush
  let brush = new fabric.PSBrush(canvas);
  brush.width = 20;
  brush.color = "#aaa";
  canvas.freeDrawingBrush = brush;

</script>
</body>
</html>

Using the mouse, it works fine on both Chrome and Firefox, but for touch or using a stylus on my touchscreen laptop (Lenovo Flex 5), it will only work on Chrome. Do you know if there is a Firefox setting that needs to be made, or if there is some reason for this behavior on Firefox?

BTW, I have the same issue when trying the demo site at https://arch-inc.github.io/fabricjs-psbrush/

Thanks in advance!

On ipad, sometimes the pencil will select the canvas instead of drawing on it

Feature Request: fallback value customizable

Hallo,
the new PressureManger implementation is really nice and useful. I also like the new fallback strategy al lot. With that I can use your brush nearly as it is. The only thing I have to change is the fallback value to 0.5 by an inherited PressureManger which overwrites the default fallback value.

It would be really helpful if the fallback value would be customizable from outside. Maybe with an extra config object on instantiation or a setter function.

[BUG] PSBrush ignores color

Heyho,

So as the title says, the PSBrush ignores color. Meaning, it draws with the set color, but the PSStrokes rendered on the canvas are always black.

From my investigation, I think this might be down to PSStrokes not having any concepts of color, but I might be wrong here

Update npm scripts

next:build, next:start, next:export look more comprehensible than build-pages , start-pages, and export-pages.

Line segments with different pressure don't have a fluent transition if drawn fast

I used an iPad pro on the provided demo page for the effect in the screenshot. Is there a possible solution?

Error in Fabric 5.0

I know the readme states that the library is only available for version 3 and 4, but I figured I would make an issue anyway to make sure people know that there is currently a few errors/bugs.

error in `_reset`

it seems in the _reset method PSBrush calls this._setBrushstyles() (a function it inherits from fabric) with no arguments, but it seems that in version 5 _setBrushStyles expects the context to be passed as the first argument:

  _setBrushStyles: function _setBrushStyles(ctx) {
    ctx.strokeStyle = this.color;
    ctx.lineWidth = this.width;
    ctx.lineCap = this.strokeLineCap;
    ctx.miterLimit = this.strokeMiterLimit;
    ctx.lineJoin = this.strokeLineJoin;
    ctx.setLineDash(this.strokeDashArray || []);
  },

I managed to monkeypatch this fix this in my code by doing the following

const baseBrush = new PSBrush(canvas);
const original = this.baseBrush._setBrushStyles;
  this.baseBrush._setBrushStyles = function _setBrushStyles(ctx) {
  if (!ctx) ctx = this.canvas.contextTop;
  original(ctx);
};

Brush color

When the brush's color is set to a color, the brush will still show up as black while drawing, only switching to the proper color after finishing the stroke

Screen.Recording.2022-05-23.at.18.02.39.mov

Peer dependency

Additionally, it would be good if Fabricjs became a peerDependency, rather than a dependency.

Use setPointerCapture

The setPointerCapture() method of the Element interface is used to designate a specific element as the capture target of future pointer events. Subsequent events for the pointer will be targeted at the capture element until capture is released (via Element.releasePointerCapture() or the pointerup event is fired).

https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture

disableTouch true also prevents pen drawing on multiple devices

setting disableTouch to true for a brush prevents pens from working, tested on ipad pro and a wacom monitor, I need a way to draw with pen only, finger should not draw

Not working with touch

Hi. I really appreciate the effort you put into this library.
On my iPad Pro, it works perfectly with the stylus but when using touch, the line is really thin (even if I set brush width to 100).
Here is a screenshot:

I have no idea why it does that because on my Surface Pro, it works perfectly with touch.
Maybe instead of using the native API, you can use a library such as pressure.js which has a polyfill when pressure is not available and uses time (even though I don't think it's adapted for this use case)
Thanks !

Might help:
https://developer.apple.com/forums/thread/31124

Still maintained ??

@arcatdmz
A few months ago, I posted an issue (#20), but I have no update about it !
Is this repo still maintained.
It would be sad to stop it because pression feature with fabric is really cool

Some strokes are skipped when drawn really fast

In some environments, when we draw strokes really fast, some of them are recorded but not drawn on the canvas.

The demo is not working in the browser

Hello there,

Thank you a lot for this plugin. It's something we are looking for for a while. I will see if I can contribute in any way.

The sad thing is that it seems to not work on a desktop computer. Is there any way we can help to add the compatibility with desktop browsers?

Event type MouseEvent.mozPressure not supported in Firefox

Using Mozilla FF 72.0.2
Getting the warning:
"MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead."

The brush just leaves a dot instead of a line.

Error using fabricjs-psbrush in vuejs

Hi,

I`m using vuejs 2 with vue-cli, webpack and typescript. I imported fabric and fabricjs-psbrush as you mentioned in docs.
My code:

import { PSBrush } from "@arch-inc/fabricjs-psbrush";
import { fabric } from "fabric";

this.canvas = new fabric.Canvas(document.getElementById("signatureCanvas"), 
{
	isDrawingMode: true,
	enablePointerEvents: true,
	//width: 600 - 2*15 - 2*1,
	height: 200,
	backgroundColor: "#fff"
});

let brush = new fabric.PSBrush(this.canvas);
brush.width = 30;
brush.color = "#000";
this.canvas.freeDrawingBrush = brush;

I`m getting error:
Uncaught TypeError: fabric__WEBPACK_IMPORTED_MODULE_2__.fabric.PSBrush is not a constructor

Demo seems broken

Hello,

I tested the demo with a Desktop computer and with an iPad and it doesn't seem to work (it draws a simple line, no pressure is present). Can you check if there is anything wrong?

Frank

Not getting psbrush to work on iPad

Hi
I had incorporated psbrush into my graphics application and found that it didn't work on the iPad. So I tested the demo site at https://arch-inc.github.io/fabricjs-psbrush/ on the iPad and found the same issue. I am just using my finger to draw. A very fine line is drawn on the screen - much finer than the line drawn on my Windows laptop - and there is no pressure effect. Though the demo site says it worked with iPad Pro, it is not working on my (actually my wife's) iPad. Her OS is iPadOS 13.5.1 which is up to date, and her iPad model is iPad Air (3rd generation, model MUUJ2LL/A). However, it is working fine on my iPhone 7 Plus with iOS 13.5.1 using finger input including the pressure effect. Otherwise it is working great on other platforms I've tried!

Pixellate when changing brush width between two strokes

Hi and thank you for this great work!

I have an issue when changing the brush width between two strokes.
Everything is fine when we are on small values, but when I set the width to higher values I have a very pixellated and cropped result when finalizing (see below).

During the stroke everything is OK, and if I initialize the brush with high value also.

Any idea on how to avoid this behavior?
Thank you!

EDIT

It seems to be a fabric.js problem
See fabricjs/fabric.js#4672

arch-inc / fabricjs-psbrush Goto Github PK

fabricjs-psbrush's People

Contributors

Stargazers

Watchers

Forkers

fabricjs-psbrush's Issues

error in _reset

Brush color

Peer dependency

EDIT

Recommend Projects

Recommend Topics

Recommend Org

error in `_reset`