search

arch-inc / fabricjs-psbrush

Fabric.js用の感圧ブラシ実装 / A lightweight pressure-sensitive brush implementation for Fabric.js
https://arch-inc.github.io/fabricjs-psbrush/
Other
62 stars 24 forks source link

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

Closed sjscotti closed 4 years ago

sjscotti commented 4 years ago

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/fabricjs-psbrush@0.0.15/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!

sjscotti commented 4 years ago

Hi again I tried to dig into what what happening in the PSbrush, and eventually started looking at the pointer events on Firefox compared with Chrome. I noticed that the pressure field in the events on Firefox were zero (or nearly so) when using pen/touch input. With that observation, I found that there is a Firefox setting in about:config that needs to be set to true for the PSbrush to work correctly with pen/touch input. The setting is dom.w3c_pointer_events.dispatch_by_pointer_messages and the issue is mentioned in this ticket: https://bugzilla.mozilla.org/show_bug.cgi?id=1487509 So I will close this issue out.