konvajs | 易学教程

KonvaJS crop and resize

阅读更多关于 KonvaJS crop and resize

问题 I'm using KonvaJS to create a simple Image-Editor. As a base for the image resize function I used the code from the Konva Examples (Knonva JS Image Resize). But now I'm struggling with the implementation of a crop function. On a button click, I enable the user to draw a rectangle on the stage. I then use the built-in crop function on my image with the coordinates, width and height of the drawn rectangle and crop the image. But when I resize the image before I crop it the cropped area shows

How can I combine alpha with compositing in Images?

阅读更多关于 How can I combine alpha with compositing in Images?

问题 I have an HTML5 Canvas. I am using the KineticJS(KonvaJS) canvas library. The canvas contains an Image as shown below. Now I want to erase pixels but being combined with a certain transparency level. The red dot erases the pixels with transparency 0. This was solved in this question. The green dot erases the pixel with transparency level of 0.5. The higher the transparency the smaller is the effect of the eraser. How can I define the strength of the eraser? 回答1: You can use 'destination-out`

Issues when drawing using scale

阅读更多关于 Issues when drawing using scale

问题 I have a KonvaJS application and I'm dealing with an issue using the scale option. You can see the problem here: Issue example I use the KonvaJS Line class to draw and it's working fine. But when I change the Stage scale then the problem comes up. It's like the cursor is in a different position. I tried different solutions without luck. Any ideas on how to solve this issue? Thanks in advance. 回答1: You just need to adapt mouse position to stage transform. You can do this: const pos = stage

Erasing Parts of an Image on HTML5 Canvas?

阅读更多关于 Erasing Parts of an Image on HTML5 Canvas?

问题 I have an HTML5 Canvas. I am using the KineticJS(KonvaJS) canvas library. On a blank canvas I dram an image as shown in the figure below. Now I want to create a circle Shape which can be used to erase parts of the image. The red circle in the image is the eraser. How can I erase parts of an Image on HTML5 Canvas? 回答1: You can use Compositing to "erase" pixels. Specifically you use destination-out compositing. KineticJS does not support compositing, but you still have a couple of options:

Konva Propagate events between layers

阅读更多关于 Konva Propagate events between layers

问题 I have a transparent drag layer on top of a shape layer. Works great to make interaction distinct so I can toggle what dragging does (between scrolling the view or editing the shape positions). However, unless I turn off drag mode (by hiding the intervening transparent Rect), none of the other mouseover events fire on the shape layer beneath it. I need to propogate the non-drag mouse events to the layer below it. There are A LOT of shapes with mouse over events. Is there an easy way to

How to make selection box in Canvas to select any object it touches not only objects it embraces?

阅读更多关于 How to make selection box in Canvas to select any object it touches not only objects it embraces?

问题 There is a great tutorial Selecting Multiple Objects with KineticJS that teaches you how to create a selection box in HTML Canvas in order to select multiple objects, but the author Michelle Higgins wrote his code to select object that embraced by the selection box. The following JavaScript code expresses the algorithm: var pos = rectSel.getAbsolutePosition(); //get the extents of the selection box var selRecXStart = parseInt(pos.x); var selRecXEnd = parseInt(pos.x) + parseInt(rectSel.attrs

Konva - Using Rotate and keeping within bounds

阅读更多关于 Konva - Using Rotate and keeping within bounds

问题 I am using Konva to create an area on a webpage. I create a dragBoundFunc function for my rectangle checking pos.x and pos.y and width of canvas and rect and this works fine - the rectangle only stays in this area as I want it to when dragged. My problem comes when I rotate the rectangle 90 degrees. Now width is less than height when I check getClientRect().width and getClientRect().height which is expected but it now won't drag all the way to the end of my canvas unless I detect end of

Dragging shapes from a palette onto a Konvajs stage

阅读更多关于 Dragging shapes from a palette onto a Konvajs stage

问题 On the Konvajs chat stream someone recently asked for an example of drag-and-drop from a palette onto an HTML5 canvas fronted by the Konvajs library. There were no ready examples and I was curious about how to achieve it. I answered the question in a codepen but decided to post here for (my own) future reference. See my answer below. 回答1: Here is my solution using jquery UI draggable & droppables. Konvajs requires jquery so the use of jquery UI is only a small step further. The palette is a

react-konva How to change image after uploading?

阅读更多关于 react-konva How to change image after uploading?

问题 I'm working on a small project that allows user to upload image and then the image will be displayed on a canvas. I'm using react-konva for this. I have a container component called DesignPage, which manages the state and pass event handlers to its children. Inside this DesignPage component, I have 2 other components: Tools - Canvas When I upload an image using Tools component, the image should be displayed on Canvas component. I'm using react-dropzone inside Tools component to handle file

react-konva How to change image after uploading?

阅读更多关于 react-konva How to change image after uploading?

I'm working on a small project that allows user to upload image and then the image will be displayed on a canvas. I'm using react-konva for this. I have a container component called DesignPage, which manages the state and pass event handlers to its children. Inside this DesignPage component, I have 2 other components: Tools - Canvas When I upload an image using Tools component, the image should be displayed on Canvas component. I'm using react-dropzone inside Tools component to handle file upload Inside this Canvas component, there is a child component called DesignImage , which is just for