I am working on a application in which users can create the following and write some comments for each Square they create. We are using FabricJs for create the following.
1) Square
2) Free hand tool
Once the user creates a Square, we are displaying a input control exactly at the bottom-right corner of the Square.
Now, the problem is where should I display the "Input" controls for for "Free hand tool"? One idea is to create another Square around the Free hand tool. Is there a way to get the height and width of the Freehand shape area?
Please help.
I am using Fabric Js for drawing the shapes.
Thanks in Advance.
Prawin
Related
In my project, I need a way to interactively draw multiple bounding boxes in an image when displayed inside a web browser. When the bounding boxes are drawn, I need to read out their coordinates. Can somebody propose a javascript library that can handle this task? I have no experience with frontend technologies like React or Angular and only have experiences with plain javascript.
This answer tells you how to draw boxes: https://stackoverflow.com/a/65376701/6469130
Either:
you should have the image drawn to the overlay canvas or
you should have an image element beneath the canvas as in this answer
What you need to add is storing the coordinates in handleMouseUp(). Logging example:
console.log(prevStartX, prevStartY, prevWidth, prevHeight);
I am trying to figure out a way to draw an outline around the area of a group of items as illustrated hopefully clearly in the sample image.
The idea is a user creates a bunch of rectangular objects always adjacent (vertically/horizontally), groups them together and then clicks a button to create the outline. I cannot figure out the outline part.
My only idea so far is to perhaps export the group to SVG and then manipulate it somehow (eg. add a thick border and use a clipPath to keep only the outer part of the border). Not even sure this idea is right because my SVG knowledge is kind of limited. Perhaps this can all be done in the context of fabricjs or with the help of an additional library?
(Using fabricjs 3.6.3)
Sample of outline around drawn area of objects
Scenario with group of objects where an object is in landscape position
Currently I have an image that needs to be manipulated so it matches the same scale, position, and rotation as a template.
The grey rectangle with a circle in the middle is the template.
The orange rectangle and circle represents the user's input. It needs to be rotated, scaled and aligned to it matches the grey one. I'm currently stumped on how to proceed. I've no code other than the following.
function align_image()
{
// clever transform alignment code here
}
Bad dog, no biscuit!
The process at of aligning the images would normally be done manual input and judged by eye. I'm hoping to automate this step and align the image to its respective size and position but leaving the comfort and safety of Photoshop DOM I'm not sure how to proceed or even if this is a trivial matter or one left best alone. The project is web based currently using javascript and three.js
So if anyone can give me some pointers I'd appreciated it.
I don't code javascript so I can only talk about the algorithm. Generally best tool for registration is to use feature matching methods (using sift, surf,...) but your image is not the kind that have strong features. Now if you're always dealing with rectangles and circles in your images, find the "edges" of the rectangle with Hough Transform, compute the angle of those edges (lines) then rotate the image with that angle in the opposite direction.
Then with the help of Hough Circle Detector, find the center of the circles in the middle of the images, calculate the distance between them, and move the target rectangle to the source's circle position. After the movement by comparing the radius of the circles, you can resize the target image to make it like the source rectangle.
All of these are conveniently doable with Opencv.
I'm using Javascript, p5.js, and Daniel Shiffman's tutorial to create a visual representation of an A* search algorithm.
An image of an example grid looks like this:
example grid
Is it possible to click on any cell of the grid, in order to print out it's attributes? Based on Daniel Shiffman's other tutorial on how to click on objects, I understand I have to create 2 functions that activate and execute respectively. I understand how to do this with a circle because a circle has a radius.
But, I don't understand how to do this with a cell because I only have it's coordinates. I can't see how to use coordinates as a metric to calculate length.
I'd appreciate any guidance to my thinking. Thank you so much in advance.
I wrote a tutorial on collision detection available here. That's for regular Processing, but everything is the same in P5.js. You're looking for rectangle-point collision.
Basically, you need to check whether the point is between the left and right edges of the rectangle and between the top and bottom edges of the rectangle. If both are true, then the point is inside the rectangle.
I recommend breaking your problem down into smaller steps and taking those steps on one at a time. For example, try getting it working with a single hard-coded rectangle and point before you try it with multiple cells or with user input.
My objective is this :
creating a rolling text that does not cross borders of a rectangle inside the canvas.
Some text should appear partially. Yet i have not found a way to obtain this.
The only thing i can think is of some setting of the canvas like rotate, and translate that show the drawings only in the limited area, as long as i don't reset the state of the canvas.
I uploaded an example of what the behaviour should be where the text is rolling from right to left (note the 'g' is cut as desired) :
!!! Sorry , the admin don't let me to upload images yet , see this at
http://jsdefense.sourceforge.net/rpsz/ex_rolling_text.jpg
Another solution could be to print text over a brand new Image and slice it when drawing ?
You want to use clipping on the canvas. MDC has an example.