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.
You just need to adapt mouse position to stage transform. You can do this:
const pos = stage.getPointerPosition();
const stageTransform = stage.getAbsoluteTransform().copy();
const position = stageTransform.invert().point(pos);
layer.add(new Konva.Circle({
x: position.x,
y: position.y,
radius: 10,
fill: 'red'
}));
Demo: http://jsbin.com/gaqepodivu/1/edit?js,output
Related
I found a lot of answers for this question, but no one fit mine.
So, we can see that regular tooltip is located above the point, like in this picture:
And when I change this example to use shared:true, the tooltip located in the left side:
Now I just want that shared tooltip will be located above the 2 points(in the example).
I know that I need to add code in the property positioner, but I cant figure out the math. more than that, if outside: true than I absolutely can't understand the math.
So, to conclude, how to make the position in shared tooltip to be above the points?
Thanks in advance.
Ok, it's really annoying task!
So I give a solution for shared tooltip and outside: true.
So first problem was to understand the coordinates system.
When outside: true we work relative to window, and when outside: false we work relative to chart.
Second, you can see if you put a log, that point values are always relative to chart, so what to do when we do outside: true?
Here the code which worked for me:
outside: true,
positioner: function(labelWidth, labelHeight, point) {
const chart = this.chart;
const chartPosition = chart.pointer.getChartPosition();
const hoverPoints = chart.hoverPoints;
const highestPoint = [...hoverPoints].sort((a, b) => a.plotY - b.plotY)[0];
const middlePoint = hoverPoints[Math.floor(hoverPoints.length / 2)];
return {
x:
chartPosition.left +
middlePoint.barX +
chart.plotLeft +
middlePoint.pointWidth / 2 -
labelWidth / 2,
y: chartPosition.top + highestPoint.plotY - labelHeight
};
},
I used a little the solutions from:
How to position highcharts tooltip above chart with outside:true
Highcharts custom tooltip positioner
To a little bit explain my solution, i share a picture:
Till now I'm not 100% understand what exactly each property say, but it's the way.
To investigate further, I suggest you to put a lot of console.logs on the properties, and also I used this code pasted to Console in devtools:
addEventListener('click', (event) => {
console.log(`x: ${event.clientX}, y: ${event.clientY}`);
})
It helped me to create a target, for example:
"The middle need to be in x:250 and y:300 because I clicked on the middle and got this values => let's play with the properties to get closer as I can!"
I am trying to implement shadows into my WEBGL 2.0 Project using this tutorial
https://webgl2fundamentals.org/webgl/lessons/webgl-shadows.html
Currently I am getting really bad results like this:
Basically a ton of the terrain is being drawn in shadow that shouldn't be. The light projection is from your camera towards the direction you are looking so hypothetically you shouldn't be able to see any shdaows becuase the light projection is the same as your camera ( I am just doing this for testing until I can get this working properly)
I have everything the same as the tutorial I believe except I am using glMatrix instead of their matrix math library (shouldn't matter I would assume). Here's the thing though. I don't use a model view matrix for anything I am rendering so none of my points are on a -1,1 range. They can go out as far as -3200...ect Its just all one big terrain mesh chunked out.
I think the issue lies with how I am creating the texture matrix
textureMatrix = glMatrix.mat4.create();
glMatrix.mat4.translate(textureMatrix,textureMatrix,[0.5,0.5,0.5]);
glMatrix.mat4.scale(textureMatrix,textureMatrix,[0.5,0.5,0.5]);
glMatrix.mat4.multiply(textureMatrix,textureMatrix, projectionMatrix);
glMatrix.mat4.invert(lightMatrix,lightMatrix);
glMatrix.mat4.multiply(textureMatrix,textureMatrix, lightMatrix);
I am using the same matrix for the light projection as your normal projection, is that an issue? if anyone could help it would be greatly appreciated.
That's probably because the Y position of your light (in your example, it is much more the distance between the eye and the scene) is too big for the Z size of your shadow volume (the size of your shadow volume in the view direction.) Here if posY is inside the wireframe box :
But if you increase posY too much (i.e. your shapes get out of the shadow volume, they disappear
So you should increase the size of your shadow volume (or shrinken your scene, either way.) You cannot simulate that with the slider because they just give you the control to the two dimensions X and Y dimensions : projWidth and projHeight.
i.e. in the last code in your tutorial page, the latest parameter ("far") for example change it from 10 to 100
const lightProjectionMatrix = settings.perspective
? m4.perspective(
degToRad(settings.fieldOfView),
settings.projWidth / settings.projHeight,
0.5, // near
10) // far
: m4.orthographic(
-settings.projWidth / 2, // left
settings.projWidth / 2, // right
-settings.projHeight / 2, // bottom
settings.projHeight / 2, // top
0.5, // near
100); // far
Then you can increase posY far more :
without having your full code, it is hard to reproduce and help you. Could you not try to just inject your scene into the tutorial code ? You can bind the viewpoint with the source and orientation of the light by using the same inputs : (just adding 0.5 to X to see a bit of shadow and make sure it is properly computed.)
/*const cameraPosition = [settings.cameraX, settings.cameraY, 15];*/
const cameraPosition = [settings.posX+0.5, settings.posY, settings.posZ];
/*const target = [0, 0, 0]; */
const target = [settings.targetX, settings.targetY, settings.targetZ];
Using the Highcharts example posted here how can you ensure that the Font Awesome icons will be positioned exactly in the middle of the data point like the native symbols/markers are? It gets called like this in the data series and uses the "plugin" that is found in that same Fiddle:
marker: {
symbol: 'text:\uf183' // fa-male
}
Using that example, if you toggle the series on/off a couple of times or zoom in/out the icons are no longer visually accurate, often displaying above the actual coordinate. In the image below you'd believe that data point had a value >50 based on where the icon is.
Their SVGRenderer example here doesn't seem to be effected.
It looks like problem with re-rendering icons later - height of the marker isn't considered. I suggest to change a bit logic for rendering icon:
var text = symbol.split(':')[1],
svgElem = this.text(text, x, y)
.attr({
translateY: h, // translate marker
translateX: -1
})
.css({
fontFamily: 'FontAwesome',
fontSize: h * 2
});
See demo: http://jsfiddle.net/2A7Zf/29/
If you want to use the markers XL-sized (i.e larger radius) for a custom chart (e.g. a Yes/No prevalence chart using the x and check icons, circle empty for the less prevalent one and circle filled for the more prevalent one and data labels showing counts/%s), then I'd recommend this tweak to center the symbols:
translateX: -w/2 + options.radius/4 - 3
I m using openlayers 3 in my project. I created a custom marker (icon) and i need to rotate marker with angle.
Is anybody tried this before? It is a critical part of my code and i couldnt figure it out.
Note: Not the map. just marker.
Set up an overlay like in the icon example and apply CSS rotation to it (ie. transform: rotate(120deg);, add browser prefixed versions as needed). If you need this to be dynamic, adjust the property through JavaScript.
In current versions of OpenLayers 3, you can use the rotation property of ol.style.Icon like this:
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
rotation: Math.PI / 2.0,
src: 'icon.png'
})
)
I have one shape
var a = paper.rect(10,10,50,20);
I want to transform this shape into
var b = paper.circle(10,10,20);
Is there any way to transform these inbuilt shapes into one another. I know paths can be transformed anyhow you want them to but can shapes also be transformed?
You can do this if with a little creativity. A rectangle can be a circle if width, height and r (radius) are all the same. Then transforming a rect to a "circle" becomes:
p=Raphael(10, 50, 600, 300);
myrect=p.rect(50,50, 300,150,0).attr({"fill":"cyan"});
myrect.animate({"width":25,"height":25, "r":25}, 3000);
JSfiddle: http://jsfiddle.net/s1pz6Lzc/30/
I don't think that is possible, except if you simply fade out one shape and fade in the other one. The reason for this is that at some point in time during the conversion the shape is neither a rectangle nor a circle, while any single animated shape in SVG has to remain the same kind of shape throughout the animation, I believe.