react-native-draw: Unable to draw anything on Canvas.
On what kind of device are you using this library?
- Android
- iOS
- Web
Environment
- OS:macOS (Monterey)
- react-native:0.66.0
- @benjeau/react-native-draw:0.7.0
Current Behavior
I have followed every installation steps mentioned in the docs, still not been able to draw anything on the canvas. Everytime i start dragging to draw a shape or line it shows me a dot where i start to drag from and then the dot vanishes.
I have also put gesture handler import on top or app.js and index.js.
@BenJeau can you help me out ?
Expected Behavior
I need to be able to draw on Canvas.
Steps To Reproduce
I just simple installed the package following the documentation and sarted the project from the example project. That’s all.
Anything else?
Here is my Component :
import React, {useRef, useState} from ‘react’; import {Animated, StyleSheet, View} from ‘react-native’; import {Canvas, CanvasRef, DrawingTool} from ‘@benjeau/react-native-draw’;
import { BrushProperties, CanvasControls, DEFAULT_COLORS, } from ‘@benjeau/react-native-draw-extras’; import {height, SIZES, width} from ‘…/constants’;
export default React.forwardRef((props, ref) => { // const canvasRef = useRef(null); console.log('props ======= >>>>>> ', props); const [color, setColor] = useState(DEFAULT_COLORS[0][0][0]); const [thickness, setThickness] = useState(5); const [opacity, setOpacity] = useState(1); const [tool, setTool] = useState(DrawingTool.Brush); const [visibleBrushProperties, setVisibleBrushProperties] = useState(false);
const handleUndo = () => { ref.current?.undo(); };
const handleClear = () => { ref.current?.clear(); };
const handleToggleEraser = () => { setTool(prev => prev === DrawingTool.Brush ? DrawingTool.Eraser : DrawingTool.Brush, ); };
const [overlayOpacity] = useState(new Animated.Value(0));
const handleToggleBrushProperties = () => { if (!visibleBrushProperties) { setVisibleBrushProperties(true);
Animated.timing(overlayOpacity, {
toValue: 1,
duration: 350,
useNativeDriver: true,
}).start();
} else {
Animated.timing(overlayOpacity, {
toValue: 0,
duration: 350,
useNativeDriver: true,
}).start(() => {
setVisibleBrushProperties(false);
});
}
};
return ( <> <Canvas ref={ref} height={height * 0.8} width={width * 0.97} color={color} thickness={thickness} opacity={opacity} tool={tool} style={{ borderBottomWidth: StyleSheet.hairlineWidth, borderColor: ‘#ccc’, alignSelf: ‘center’, }} /> <View> {!props.toolsVisible && ( <CanvasControls onUndo={handleUndo} onClear={handleClear} onToggleEraser={handleToggleEraser} onToggleBrushProperties={handleToggleBrushProperties} tool={tool} color={color} opacity={opacity} thickness={thickness} buttonStyle={{elevation: 0}} /> )} {!props.toolsVisible && visibleBrushProperties && ( <BrushProperties color={color} thickness={thickness} opacity={opacity} onColorChange={setColor} onThicknessChange={setThickness} onOpacityChange={setOpacity} style={{ position: ‘absolute’, bottom: 80, left: 0, right: 0, padding: SIZES.fifteen, backgroundColor: ‘#00000015’, borderTopEndRadius: SIZES.fifteen, borderTopStartRadius: SIZES.fifteen, paddingTop: SIZES.twenty, borderWidth: StyleSheet.hairlineWidth, borderBottomWidth: 0, borderTopColor: ‘#ccc’, opacity: overlayOpacity, }} /> )} </View> </> ); });
About this issue
- Original URL
- State: open
- Created 2 years ago
- Comments: 28 (3 by maintainers)
Sorry for the late comment, just merged #76 - can’t release a new version right now, but specifying the commit hash in the
package.jsonshould work from looking online, e.g.:I solved. Go node_modules>@luncheon>simplify-svg-path>index.min.js. Change class name “t” to “T” and return new t to return new T It worked for me.
updated index.min.js at the path described above class T { constructor(t, e) { this.x=t, this.y=e } t() { return new T(-this.x, -this.y) } o(t=1) { return this.i(t/(this.h()||1/0)) } l(e) { return new T(this.x+e.x, this.y+e.y) } u(e) { return new T(this.x-e.x, this.y-e.y) } i(e) { return new T(this.xe, this.ye) } _(t) { return this.xt.x+this.yt.y } h() { return Math.sqrt(this.xthis.x+this.ythis.y) } M(t) { const e=this.x-t.x, r=this.y-t.y; return Math.sqrt(ee+rr) } }
class e { constructor(t, e) { this.g=t, this.v=e } }
const r=(t, e, i, c, u, f, a)=> { if(u-c==1) { const r=t[c], s=t[u], o=r.M(s)/3; return void n(e, [r, r.l(f.o(o)), s.l(a.o(o)), s]) } const w=h(t, c, u); let , d=Math.max(i, i*i), M= !0; for(let r=0; r<=4; r++) { const r=s(t, c, u, w, f, a), h=l(t, c, u, r, w); if(h.error<i&&M)return void n(e, r); if(=h.index, h.error>=d)break; M=o(t, c, u, w, r), d=h.error } const g=t[-1].u(t[+1]); r(t, e, i, c, _, f, g), r(t, e, i, _, u, g.t(), a) }
, n=(t, r)=> { t[t.length-1].m=r[1].u(r[0]), t.push(new e(r[3], r[2].u(r[3]))) }
, s=(t, e, r, n, s, o)=> { const i=1e-12, c=Math.abs, h=t[e], l=t[r], u=[[0, 0], [0, 0]], f=[0, 0]; for(let i=0, c=r-e+1; i<c; i++) { const r=n[i], c=1-r, a=3rc, w=ccc, =ac, d=ar, M=rrr, g=s.o(), v=o.o(d), b=t[e+i].u(h.i(w+)).u(l.i(d+M)); u[0][0]+=g.(g), u[0][1]+=g.(v), u[1][0]=u[0][1], u[1][1]+=v.(v), f[0]+=g.(b), f[1]+=v.(b) } const a=u[0][0]*u[1][1]-u[1][0]u[0][1]; let w, ; if(c(a)>i) { const t=u[0][0]*f[1]-u[1][0]*f[0]; w=(f[0]*u[1][1]-f[1]u[0][1])/a, =t/a } else { const t=u[0][0]+u[0][1], e=u[1][0]+u[1][1]; w==c(t)>i?f[0]/t: c(e)>i?f[1]/e:0 } const d=l.M(h), M=id; let g, v; if(w<M||<M)w==d/3; else { const t=l.u(h); g=s.o(w), v=o.o(), g.(t)-v.(t)>dd&&(w==d/3, g=v=null) } return[h, h.l(g||s.o(w)), l.l(v||o.o()), l] }
, o=(t, e, r, n, s)=> { for(let o=e; o<=r; o++)n[o-e]=i(s, t[o], n[o-e]); for(let t=1, e=n.length; t<e; t++)if(n[t]<=n[t-1])return !1; return !0 }
, i=(t, e, r)=> { const n=[], s=[]; for(let e=0; e<=2; e++)n[e]=t[e+1].u(t[e]).i(3); for(let t=0; t<=1; t++)s[t]=n[t+1].u(n[t]).i(2); const o=c(3, t, r), i=c(2, n, r), h=c(1, s, r), l=o.u(e), u=i.(i)+l.(h); return(f=u)>=-112e-18&&f<=112e-18?r: r-l._(i)/u; var f }
, c=(t, e, r)=> { const n=e.slice(); for(let e=1; e<=t; e++)for(let s=0; s<=t-e; s++)n[s]=n[s].i(1-r).l(n[s+1].i®); return n[0] }
, h=(t, e, r)=> { const n=[0]; for(let s=e+1; s<=r; s++)n[s-e]=n[s-e-1]+t[s].M(t[s-1]); for(let t=1, s=r-e; t<=s; t++)n[t]/=n[s]; return n }
, l=(t, e, r, n, s)=> { let o=Math.floor((r-e+1)/2), i=0; for(let h=e+1; h<r; h++) { const r=c(3, n, s[h-e]).u(t[h]), l=r.xr.x+r.yr.y; l>=i&&(i=l, o=h) } return { error: i, index:o } }
; export default(n, s= {}
)=>0===n.length?““😦(t, e, r)=> { const n=t.length, s=10**r, o=r<16?t=>Math.round(t*s)/s: t=>t, i=(t, e)=>o(t)+”,”+o(e); let c, h, l, u, f= !0; const a=[], w=(t, e)=> { const r=t.g.x, n=t.g.y; if(f)a.push(“M”+i(r, n)), f= !1; else { const s=r+(t.v?.x??0), f=n+(t.v?.y??0); if(s===r&&f===n&&l===c&&u===h) { if( !e) { const t=r-c, e=n-h; a.push(0===t?“v”+o(e): 0===e?“h”+o(t):“l”+i(t, e)) } } else a.push(“c”+i(l-c, u-h)+" “+i(s-c, f-h)+” “+i(r-c, n-h)) } c=r, h=n, l=r+(t.m?.x??0), u=n+(t.m?.y??0) } ; if( !n)return”“; for(let e=0; e<n; e++)w(t[e]); return e&&n>0&&(w(t[0], !0), a.push(“z”)), a.join(”") }
)(((t, n, s)=> { n&&(t.unshift(t[t.length-1]), t.push(t[1])); const o=t.length; if(0===o)return[]; const i=[new e(t[0])]; return r(t, i, s, 0, o-1, t[1].u(t[0]), t[o-2].u(t[o-1])), n&&(i.shift(), i.pop()), i }
)(n.map(“number”==typeof n[0].x?e=>new T(e.x, e.y):e=>new T(e[0], e[1])), s.closed, s.tolerance??2.5), s.closed, s.precision??5);
After some time the best solution I found :
I replaced this package with a fork that solved the issue : https://www.npmjs.com/package/@vcandou/react-native-draw Everything works fine, almost no change needed with this fork, you just need to replace the imports from
import {Canvas} from '@benjeau/react-native-draw';toimport {Canvas} from '@vcandou/react-native-draw';and in the package.json to"@vcandou/react-native-draw": "0.8.3",@poPaTheGuru That what’s I mean. Maybe someone knows another working lib that have ability to add Img in canvas and draw on it?
This issue is still reproducing with
This is how terminal looks when pressing on screen:
@Guaynora looks like the code @batuayhan replicated was wrongly pasted. just change the first class t to T, then change all occurrence of “new t” to “new T”.
like below: