Comments (5)
Figured it out :) accessing context.handleMouseDown
and context.handlePointerMove
gets the job mostly done for me.
from react-canvas-draw.
Hey @ps2-controller - can you give some more context on what you did to make this work? I'm trying to access the default onDoubleClick
prop of the canvas that you can otherwise access by baking a vanilla canvas tag into a React component. Something like:
<CanvasDraw
ref={(canvasDraw) => (this.saveableCanvas = canvasDraw)}
brushColor={strokeStyle}
brushRadius={8}
imgSrc={path}
lazyRadius={10}
canvasWidth={parseInt(width, 10)}
canvasHeight={parseInt(height, 10)}
disabled={disabled}
onDoubleClick={this.onDoubleClick}
/>
Any idea how I'd go about setting that up so that I can access that method? Note that it works when I pass that onDoubleClick
prop directly to a tag.
from react-canvas-draw.
Hmm, not sure - My workaround actually involves calling react-canvas-draw's own implemented wrapper functions such as this one
I call that as follows:
const callUnderlyingMethod = () => {
let context = canvasRef.current
// literally empty, as react-canvas-draw's function requires a preventDefault fxn as a param
let someFunction = () => { }
context.handleMouseDown({preventDefault: someFunction})
}
return (
<CanvasDraw
ref={canvasRef}
brushRadius={brushRadius}
brushColor={brushColor}
/>
)
This works for my use-case since I'm using websockets to draw an image based on events instead of the user's manual mouse clicks, so I'm using the same functions react-canvas-draw already exposes. (You can check it out at https://demondoodle.com, but the source code isn't public yet)
However, it looks like you want to go a layer lower and call a directly unexposed method on the canvas itself. I'm not sure how that works with this library. It's especially complicated because react-canvas-draw seems to be using four html canvases under the hood. One slightly tacky option might be wrapping your in a tag and calling onDoubleClick when the span is doubleclicked:
<span onDoubleClick={() => this.onDoubleClick()} >
<CanvasDraw
ref={(canvasDraw) => (this.saveableCanvas = canvasDraw)}
brushColor={strokeStyle}
brushRadius={8}
imgSrc={path}
lazyRadius={10}
canvasWidth={parseInt(width, 10)}
canvasHeight={parseInt(height, 10)}
disabled={disabled}
onDoubleClick={this.onDoubleClick}
/>
</span>
Otherwise, not sure :(
Hope that's helpful!
from react-canvas-draw.
That is helpful- thanks a bunch! Ended up wrapping the CanvasDraw component in a div that takes my onDoubleClick custom event. Seems to be working alright.
from react-canvas-draw.
Awesome, glad to hear it :)
from react-canvas-draw.
Related Issues (20)
- Insert label
- it seems it does not supports react 17+ versions? HOT 2
- background image while fetching from AWS S3 in google chrome does not work from localhost HOT 1
- Support for pressure considered? HOT 4
- The "ref" issue HOT 1
- Cannot read properties of undefined (reading 'getPointerCoordinates') HOT 2
- [Feature Request] Resize pointer on zoom
- getDataURL parameters useBgImage doesn't seems to work HOT 11
- Scrolling while drawing throws an error
- Accidental duplicate issue
- Cannot read properties of undefined (reading 'getPointerCoordinates') when setting a small canvasWidth HOT 3
- Invariant Violation: View config getter callback for component `canvas` must be a function (received `undefined`). Make sure to start component names with a capital letter.
- ... HOT 1
- Support for React 18 & typescript HOT 3
- Property 'getDataURL' does not exist on type 'CanvasDraw' HOT 1
- Feature request: callbacks for common events
- Animation events continue after loading new data
- Postion canvas always static
- Uncaught TypeError: Cannot read property 'getPointerCoordinates' of undefined. HOT 1
- apply clear reactangle
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-canvas-draw.