konvajs

来源： https://stackoverflow.com/questions/49943763/responsive-canvas-with-react-and-konva

问题 Any discussion is welcomed. Thanks for reading! What I am trying to do I'm trying to implement simple paper(whiteboard) using Konva.js. So far I've implemented Drag, Zoom and Free drawing on paper. I referred to https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html for Zoom https://konvajs.org/docs/sandbox/Free_Drawing.html for Free drawing I want to draw only on the region with beige color background , and I want to draw exactly under the pointer even though it is zoomed or

问题 I am using react-konva for drawing shapes on a stage and to edit them I select that shape and the shape has be set to focus on stage(i.e come to the center of the stage). On the click of a button I am updating the X,Y and scale of the stage but I am not getting the shape exactly at the center of the stage. Please see this demo and share your inputs on this: https://codesandbox.io/s/shapecenterdemo-o9hg2?file=/src/ShapeCenterDemo.jsx PS: Can't remove the dragBoundFunc from the stage. 回答1:

问题 I am using react-konva for drawing shapes on a stage and to edit them I select that shape and the shape has be set to focus on stage(i.e come to the center of the stage). On the click of a button I am updating the X,Y and scale of the stage but I am not getting the shape exactly at the center of the stage. Please see this demo and share your inputs on this: https://codesandbox.io/s/shapecenterdemo-o9hg2?file=/src/ShapeCenterDemo.jsx PS: Can't remove the dragBoundFunc from the stage. 回答1:

问题 I am trying to retrieve the bounding box of several rectangles (some of these rectangles are rotated) My current implementation works for rectangles that are not rotated, but I am not sure if I have the right formula for the ones with a rotation angle. Here is an example: https://codesandbox.io/embed/13z2p2w89q The rotate point function was taken directly from the konvajs website (https://konvajs.org/docs/posts/Position_vs_Offset.html) and I updated it with some minor changes 回答1: Here is my

问题 I'm using Konvajs, I have group of texts, and I want don't allow drag group outside of the canvas, I'm tried solved that using dragBoundFunc, but that don't help me, now I just try change group position during dragmove, but setPosition, setAbsloutePosition, nothing allow me to change group position stage.on('dragmove', (e) => stageOnDragMove(e, layer)); const stageOnDragMove = (e: Konva.KonvaEventObject<any>, layer: Konva.Layer) => { const selectionGroup = layer.findOne('#selection-group');

问题 I'm trying to get rid of my tslint error Type declaration of 'any' loses type-safety. but I'm struggling to figure out what the correct type would be for the Event. I'm working through the Lynda "Building and Deploying a Full-Stack React Application" while trying to convert it to Typescript. Here are the specific lines that are causing the issue: onClick={(event: any) => { makeMove(ownMark, event.target.index) }} I have tried to declare the event as a few different types, like React

问题 I want to give my users an easy way to visually trace a route on a map or a picture. The solution must let the users add control points that they can use to put bends into the route. It should work with html5 canvas - I currently use the Konvajs library so a solution that uses this would be good. In the interests of sharing & learning, if you can suggest solutions using other HTML5 canvas libraries that would be good to see too. Note: This is not the original question posed. However it

问题 I want to give my users an easy way to visually trace a route on a map or a picture. The solution must let the users add control points that they can use to put bends into the route. It should work with html5 canvas - I currently use the Konvajs library so a solution that uses this would be good. In the interests of sharing & learning, if you can suggest solutions using other HTML5 canvas libraries that would be good to see too. Note: This is not the original question posed. However it

问题 I want to give my users an easy way to visually trace a route on a map or a picture. The solution must let the users add control points that they can use to put bends into the route. It should work with html5 canvas - I currently use the Konvajs library so a solution that uses this would be good. In the interests of sharing & learning, if you can suggest solutions using other HTML5 canvas libraries that would be good to see too. Note: This is not the original question posed. However it