I want to enable the user to draw a polygon from lines to create the shape he want and apply transform to it (Rotate and resize).
How to implement it using Konvajs ?
Related Questions in JAVASCRIPT
- Using Puppeteer to scrape a public API only when the data changes
- inline SVG text (js)
- An array of images and a for loop display the buttons. How to assign each button to open its own block by name?
- Storing the preferred font-size in localStorage
- Simple movie API request not showing up in the console log
- Authenticate Flask rest API
- Deploying sveltekit app with gunjs on vercel throws cannot find module './lib/text-encoding'
- How to request administrator rights?
- mp4 embedded videos within github pages website not loading
- Scrimba tutorial was working, suddenly stopped even trying the default
- In Datatables, start value resets to 0, when column sorting
- How do I link two models in mongoose?
- parameter values only being sent to certain columns in google sheet?
- Run main several times of wasm in browser
- Variable inside a Variable, not updating
Related Questions in TYPESCRIPT
- It doesnt always show all the books on my homepage
- S3 integration testing
- Make some of the type's field optional
- storybook 7 does not recognize module declarations
- Page in React only renders elements after refreshing
- Error Inserting into Supabase: Type of 'await' operand must either be a valid promise or must not contain a callable 'then' member
- vscode, debug angular, first time, doesn't debug, 2nd time stops at main.js then it's ok
- Get remote MKV file metadata using nodejs
- Vue/TailwindCSS - Content is behind Sidebar
- TypeScript Error only on big type only when assigned to a variable
- pnpm firebase app "Could not find a declaration file for module 'mime'"
- TypeScript: Type checking while parsing an arbitrary JSON that is typed/
- Issue with BBCode image tag on React
- Typescript: returnType based on value 'single' prop
- Failed to resolve import, but the path is valid, and detected as such by VSCode
Related Questions in KONVAJS
- Resize nodes bug
- How to draw a polygon from lines using Konva js?
- How do I move a group of objects and keep their new position in state?
- How to Disable Dragging for Konva.Transformer in Konva.js?
- Konvajs how to dragging a Transformer programatically
- Clicking/tapping on a picture does not work on mobile devices
- How to remove resize sliders from an image in konvaJS
- How to center an image on canvas after rotate the image (Konva.js)
- Transferring Large Data from Web Worker to Main Thread in Vue.js
- Reshaping Images (Square, Circle, Triangle, etc.) in Konva.js
- KonvaJs Group's hide() or show() methods do not affect the visibility of its children
- Handling dblclick event in Konva
- Using Konva with next js
- Is there a way to sync Mapbox canvas and Konva canvas coordinate system
- Konvajs how to set the Stage size to millimeter (mm) instead of pixel (px)?
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
Popular Tags
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Making polygons and transforming them is simple with Konva.
See tutorial on Konva.Polygon and Konva.Transformer. Note the polygon tutorial does not cover the process of the user nominating the points. Open another question for that if required.
In Konva a polygon is created from the Konva.Line shape, and is positioned at a specific x,y point that you specify initially. All Konva shapes share this feature.
Often, for polygons, it is easier to leave this set to 0,0. The points of the polygon are stored as a distinct attribute. The first point is interpreted as a move-to command which starts from the polygon x,y position. Subsequent x,y points are treated as draw-to commands thus drawing the lines of the polygon. There is a further closed attribute that is used to close the shape, connecting the last point to the first.
The points are an attribute of the Konva.Line. When we drag the polygon we do not need to change the points since they are drawn in reference to the shape's position attribute.
To create a polygon you must create code that will store points indicated by the user via mouse or touch, and then close the polygon when the user indicates to do so.
All Konva shapes can be visually scaled and rotated using a Konva.Transformer Regarding shape size, the Transformer does not change the width or height shape of the shape - it changes the scale.
Since the Transformer operates on the shape's transformation matrix, and the points are contained within the shape, there is no need to do any word to affect the points for any of the changes that the Transformer introduces.
See this blog post for a wider discussion of the Transformer.