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.
Related
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.
I am new and I am working using this map. I have a div container called: #statesvg where I want the map to adapt to its size. but this one is cut.
in which part of the code can I modify the height and width of the map?
Thank you very much
http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922
//I get the actual size of the div
var width = document.getElementById('statesvg').offsetWidth;
var height = document.getElementById('statesvg').offsetWidth;
.
.
.
Same code
Other than scaling the entire svg (or portions of it), you can change the projection. The projection determines how much space your features occupy, no matter what the svg size. The easiest method would be to use projection.fitSize() in d3v4+:
projection.fitSize([width,height],feature);
Where width and height are your svg dimensions, and feature is your geojson feature collection (json in your example, not json.features, it takes an object, not an array). This method sets the scale and translate of the projection so that your features are centered and scaled appropriately for your svg/canvas.
Alternatively, given that all fitSize does is set the translate and scale of a projection, you could modify these attributes directly to set the appropriate scale and translate. Since your example centers the projection with [width/2,height/2] this is will already adapt to provided dimensions. Consequently, all you need to do is set the scale. If the scale value of 1000 is appropriate for a width of 960 and height of 500, then a scale of 2000 will be appropriate for a width of 480 and a height of 250. With this we can just use some simple math:
var scale = 960/width*1000; // assuming that width is always limiting
If width or height could be limiting, find the scale value for both using the above logic and take the higher scale value. Then apply the scale to the map the same as your example does now: projection.scale(scale);. This lets you scale the map easily, and in d3v3 as well (like your example block).
How do I set the object scale value(width and height) based on the pixel value using three.js?
object.scale.set(0.05,0.05,0.05);
I need to set 0.05 value pixel size
Rephrasing your question, please correct me if I got you wrong:
You want to use pixel values instead of the relative values to set the size of your object as it appears on screen.
Now, the problem here is, that three.js (or even webgl) don't really use a concept of pixels internally.
How large (in pixels) an object appears on the screen depends on a lot of factors:
the css-size of the canvas element and the devicePixelRatio
the width and height of the canvas element
obviously the size of the object
the camera-position and other properties (aspect-ratio, field-of-view, relative orientation and position to object)
So pixels will simply lose any meaning when it comes to 3D-graphics. There's nothing keeping you from using any unit you want for sizes and positions, but that doesn't make it have any relation to pixels on screen.
You will also want to check out this answer: THREE.JS: Get object size with respect to camera and object position on screen
I create an Image object in JavaScript for the purposes of drawing it on a canvas. I set the width and height properties of the image, then draw it on a canvas. The image is drawn at is natural dimensions, not the dimensions that I set.
// Assume image is a loaded image object, and ctx is a canvas' 2D context.
image.width=image.width/2;
image.height=image.height/2;
ctx.drawImage(image,0,0); // Draws the image at its original dimensions, not half-size.
The only way I know of to draw the image at a different size is to set the width and height explicitly as part of the drawImage function, like so:
ctx.drawImage(image,0,0,image.width/2,image.height/2);
Here's a JSFiddle demo of the two methods in action to better illustrate what I'm describing: http://jsfiddle.net/do3gg1cy/.
For my use case I'd like to be able to resize the Image object itself and have it drawn at this size on the canvas (i.e. the first method), rather than having to set the dimensions during the drawImage operation.
Am I setting the width and height properties incorrectly, or does anyone know of another way to go about this?
According to the standard, if "dw" & "dh" are omitted, the drawImage method establishes the source image dimension from the image's intrinsic width & height in image pixels. Modifying the width & height properties doesn't change these intrinsic values.
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.