How to get the actual width of a rotated canvas rectangle - javascript

I'm using konva js to make a transformable rectangle. I'm able to access the width of the rectangle using
rect1.getClientRect().height
. However, when I rotate the rectangle, the width property is changing. I believe width property gives the overall horizontal length of the container of the rectangle canvas. Is there any way I can get the actual width of the rotated rectangle. Here's the jsfiddle

The Konva-object has an attrs attribute: rect1.attrs.width * rect1.attrs.scaleX
https://jsfiddle.net/8gack34s/4/
there is also attrs.rotation that you can use to calculate it mathematically.
Konva warning: Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.

Related

How to get width of the image with non zero rotation (konva)

I have an image inside Group element. With Transformer element, user changes image width and rotation. After that, how do I get image width? getWidth() returns the value which I manually have set while creating new Image. getClientRect().width returns the actual width, the way it displayed for the user, so it seems ok, but the problem with it starts when the image is rotated. Because the getClientRect().width returns not the image width (y), but the width of circumscribed rectangle of our image (x)
I'm using Konva v7.0
See Konva code tutorial re transformers here, image below. The width and height values do not change as the shape is 'stretched', but the scale values do change.
The intro to the transformer class in the Konva docs says:
Transformer constructor. Transformer is a special type of group that
allow you transform Konva primitives and shapes. Transforming tool is
not changing width and height properties of nodes when you resize
them. Instead it changes scaleX and scaleY properties.
And I have seen in the Konva docs various mentions that the dimension methods do not take into account scaling.
In summary then, the transformer changes the dimensions of shapes it effects by scaling them. Therefore the current scaled width for a shape can be found by:
let visibleWidth = shape.width() * shape.scaleX();
If the shape in question is part of a group that is transformed then you will need to use
let visibleWidth = shape.width() * shape.getAbsoluteScale().x;
to get the absolute scale of the node which takes into account its ancestor scales.

Scaling a canvas to full screen really decreases the resolution

I'm trying to make a full screen game to help me learn JS. I made a canvas item and streched it to the size of the screen using CSS. Then I draw a circle. The issue I have is that the circle looks terrible!
_draw.arc(20, 20, 10, 0, 2 * Math.PI);
Here is a jsfiddle example. http://jsfiddle.net/H5dHD/152/
I've tried using different scale factors (so _draw.scale) but it dosent seem to matter...
What am I doing wrong?
P.S. I know the coordinates are off. I didn't include that code for the example.
The problem is that you resized the canvas using the CSS-style, and do not change the actual width and height. When you use CSS styling to change the size, the canvas will be stretched, but the internal drawing resolution stays the same. The result is that the canvas blurs.
To change the internal resolution, change the width and height attributes of the canvas HTML element itself.
document.getElementById('iDraw').height = screen.availHeight;
document.getElementById('iDraw').width = screen.availWidth;
Here is your updated fiddle:
http://jsfiddle.net/H5dHD/154/

Canvas border radius using Fabric.js

I am trying to set border radius for canvas following is my code a set Height is applying perfectly also set Width applying perfectly just having the issue with border radius just tell how to set border radius of canvas using following code.
canvas.setHeight(314);
canvas.setWidth(629);
canvas.setBorderRadius(314.5/157.25);
There's no setBorderRadius method in Fabric.
You can always change border-radius of canvas element via CSS (in supporting browsers).

How to create CSS/JavaScript circles grid

I need to do something like this:
This may look quite easy, but there are some requirements:
- the width of the containing div should depend on the text length (is it possible at all in CSS?)
- all circles should be positioned randomly - this is the most diffucult part for me.
As I'm using border-radius for creating circles (setting height, width and border-radius of 50%) I try to create some kind of grid in JavaScript where I iterate through each element and get its dimensions. Then I get the position of previous element (if any) and add them to the current element dimensions. Additionally, adding some margins will help avoid collisions. Is it correct approach?
I'm just looking for a suggestion how to solve my two issues.
Circles that scale based on size of content.
This is something you will need to solve first, because you wont be able to place them anywhere without first knowing their dimensions.
Naturally the size of a DIV expands first by width, then by height. That is, the maximum width of a container must first be utilized before moving on to the height constraint. Because of this, making a circle scale with equal radius may prove to be quite difficult without using a relative averaging.
Relative averaging is finding the average dimensions of your height / width based of the exhisting area of the contianer bounding your content. For example:
The width and height of the DIV bounding your content can be detected with javascript. Let's say youve discovered those properties too be 200px x 20px respectively.
Your total area is width * height so 4000px; But we are trying to acheive a square so we can apply rounded corners and form a rounded circle. We want to find dimensions of a rectangle that will be equal to the same area and then apply those new dimensions.
To acheive the same area with an equal width * height you can do something like:
√ 4000 = 63.2455532
Thus: 63.2455532 x 63.2455532 = 4000
Random placement of DIVs, and avoid collisons between DIVs.
After finding dimensions, you will be able to use a rand on your (X,Y) coordinates for the placement. Push these coordinates and radius onto an array. Use recursion too place the remaining circles on collsion failures. A collision failure would come from an element that has overlapping (X,Y)+radius relative too elements in the array that were pushed successfully.

Grid drawn using a <canvas> element looking stretched

I'm trying to draw a grid on a <canvas> element with the ultimate goal of making a Go board.
For some reason the grid is looking stretched, with the lines being thicker than 1 pixel and the spacing being completely wrong. It doesn't even start in the (10,10) position..
It would be great if someone could take a look at tell me what I'm doing wrong.
http://jsfiddle.net/h2yJn/
I've found the problem. I was setting the dimensions of the <canvas> using CSS, when you actually have to set the width and height attributes. This was causing it to be stretched/skewed.
var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');
http://jsfiddle.net/h2yJn/66/
Please try it outside jsfiddle, maybe jsfiddle is applying some linear transformation.
Also please make sure that you add 0.5 everywhere to both x and y coordinates. Alternatively, you can apply translate(0.5, 0.5) to shift all coordinates by half a pixel.

Categories

Resources