konvajs

问题 The title might be misleading but that is the best I could come up with for a summary of my question. Anyways, I need to figure out how to make a list, or a container, in this case a plain rectangle that contains a list of items, which can be dragged up and down in order to reveal other items in the container. In a way it would resemble a constrained div with a slider bar, but without the slider. Now, I have an idea on using KonvaJS, former KineticJS to put all the items in the container in a

问题 What's the best way to implement undo/redo functionality for KovaJS in react? I see that each node has toObject() method used for serialisation of each canvas node. One easy implementation would be to serialize the object on each modification and push it into a array of changes. And once the user taps Undo/Redo, to try and rebuild the canvas from that array. Any thoughts? 回答1: You don't need to use toObject() if you are using React. It will be much simpler to save a history of the state

问题 Is there an example or way of drawing a box around multiple objects on the konva canvas and by doing so selecting the objects which are inside this box with some kind of indicator around them? 回答1: Here's a working snippet. Uses simple rect-overlap collision detection and corrects drag rect co-ordinates if user chooses to drag north or east. Should get you going. // Set up the canvas and shapes var s1 = new Konva.Stage({container: 'container1', width: 300, height: 200}); var layer1 = new

问题 i'm using konvajs and need some help! Assume that i need an image that draggable inside a complex shape. So i wonder that can it be possible to using masking with Konva.Group instead of clipFunc OR a way to convert an masking image to canvas-clip-path and use with clipFunc! like this: Masking draggable 回答1: By default Konva supports only simple clip with rectangle shape and clipping with clipFunc where you can describe required path. https://konvajs.github.io/docs/clipping/Clipping_Function

问题 I want to draw a line on a canvas with context.globalCompositeOperation = 'destination-out'; context.globalAlpha = 0.118; The result looks like this: The background if the image is a yellow rectangle. I use a circle to drag and drop it over the image and it will paint the line. As you can see my drawn line is not so smooth. You can see the circles and you do not have a compound line. I created a JSFiddle here: console.clear(); var history = new Array(); var imageObj = new Image(); var img =

问题 I would like to get cursor position on Stage in React-Konva by getPointerPosition() `handleStageOnMouseMove(e){ console.log(e.getPointerPosition()); } render(){ return( {this.handleStageOnMouseOver(e)} } > Hello World ); } ` But I found some trouble that is when I move cursor over the program will return 's event instead of 's event. ** I have some method that is use 'ref' attribute to references but I don't know how to get cursor position. 回答1: handleMouseMove = (e) => { // there are several

问题 I am working on a Gantt-like task display using HTML5 canvas, and the Konvajs canvas library. Deconstructing a Gantt chart into its components leads me currently to a view as below. Here 1 is the list of tasks, 2 is the task bar area, 3 is a task bar, and 4 is a text cell. For this question I am seeking code to construct 1 & 4. The data to be displayed will be delivered in plain JS objects with a nested list of tasks where each task has a number, name, assigned-to person name, start date, end

问题 To the best of my knowledge there isn't an easy/built in way with Konva to create a context menu for right clicking on objects. I am busy working on a project which requires the use of context menus, so I thought I'd just create my own. Needless to say I am fairly new to Konva, so I was hoping someone on SO might have more experience to help me get over the last hurdles. I have create a sandbox, located HERE The requirements are: An object should be draggable. (I copied a working example off

问题 I'm creating a custom label maker using Konvajs and everything was working perfectly until I tried to serialize the stage to JSON. The user creates their custom label in three steps. The first step they select a template image from our library that has a masked area. The second step allows them to upload a personalized image that is placed behind the image that was loaded on the first step. There are external controls that allow the user to scale and move the image so it is rendered with in

问题 Using Konva js, Is there a way to drag a circle's circumference without showing the resizers elements, in order to resize the circle ( make the radius grow)? Using a Transformer - displays the resizers, and stretches rectangles by changing the scale. I want to actually resize the circle (larger radius) without showing the resizers. All help will be appreciated. Thx 回答1: You may need to use two circles for that. One circle is your main shape, another circle for detecting events on stroke (the