I want to scrollTo the active element
I am using below package for walkthrough, but this is not working in my case, and not scrolling to the actual position to the my element,
https://www.npmjs.com/package/rn-tourguide
Any Idea, how can I scroll to exact position of my current active walkthrough element
for scroll container, I am using (https://reactnative.dev/docs/scrollview)
so what solution i can give you is based on assumption you know (via code) whats your current active element.
If you know that, you need to have refs for every comp in which this tour guide will be displayed.
After that once you have ref, when its focused you can call
newRef?.current?.measureInWindow( (fx, fy, width, height, px, py) => {
console.log('Component width is: ' + width)
console.log('Component height is: ' + height)
console.log('X offset to frame: ' + fx)
console.log('Y offset to frame: ' + fy)
console.log('X offset to page: ' + px)
console.log('Y offset to page: ' + py)
})
}
To get exact position of the elemnt wrt to page and event the device:
You can check my answer here dynamically position
you can reuse that logic here :)
Hope it helps. feel free for doubts
Related
I'm using amcharts 4 in vue js app. Trying to build an XYChart with draggable circle bullets. I'm toggling between drag or zooming options, its either one or other , so I'm setting up the draggable state to a bullet instance whenever its hover on and out (idk if thats a good approach)
this.bullet.events.on("over", e => {
e.target.interactions.draggable = this.darggableState;
});
this.bullet.events.on("drag", e => {
console.log(e.target.dataItem.valueY) // representation value of Y axis
console.log(e.target.relativeY) // infinity . As far as I understood this value
should represent relative Y axis value accordingly current bullet position on yAxis.
Meawhile I'm still able to get a pixel representation of position.
});
I'm considering that I might should use an event on some other instance than bullet. My main goal is to retrieve relative value of a dragged bullet on the chart so that I could update my data with it. Any help or advices appreciated !
After hours of trying to find the best approach , realized that cursor object is the best way to get reference to axis value accrodingly to current position.
this.chart.cursor.events.on("cursorpositionchanged", function(ev) {
var yAxis = ev.target.chart.yAxes.getIndex(0);
console.log("y: ", yAxis.positionToValue(yAxis.toAxisPosition(ev.target.yPosition)));
});
https://www.amcharts.com/docs/v4/tutorials/tracking-cursors-position-via-api/
or event on dragging event you can still access
const yAxis = this.chart.yAxes.getIndex(0);
const axisValue = yAxis.positionToValue(yAxis.toAxisPosition(this.chart.cursor.yPosition)
Here's my code in sandbox
The code in sandbox is fully working,(component based) but when i transfer it in actual it's not working
would be best if you share a working example of your code in a Sandbox/JSBin or similar. Then it is easier to help.
But one thing:
in v4 of d3
d3.mouse(container)
Returns the x and y coordinates of the current event relative to the
specified container.
What you want is d3.event.pageX which gives you:
An integer value, in pixels, indicating the X coordinate at which the mouse pointer was located when the event occurred. This value is relative to the left edge of the entire document, regardless of the current horizontal scrolling offset of the document.
But to be certain I would need to see a working example to try this out.
For D3 v4 specifically:
Append a div using d3:
const tooltip = d3
.select('body')
.append('div')
.attr('class', 'tooltip');
Now Add a mousemove and mouseout listener:
d3.on('mousemove', () => {
return tooltip
.style('top', d3.event.pageY - 30 + 'px')
.style('left', d3.event.pageX + 'px');
})
.on('mouseout', function() {
d3.select(this)
.transition()
.duration(this.transitionDuration * 0.2)
.style('fill', `green`);
return tooltip.style('visibility', 'hidden');
});
I'm trying to rotate a view around a certain point not the center (just like transform-origin in css) in React Native. At this time elements can only be rotated around the center. The result should be two views/images containing a point laying upon each other at exactly this point, while one of the views is rotated at the desired point. React Native does not support this layout feature yet, so I have to calculate the offsets and then add them using translateX and translateY.
I've tried several approaches e.g. this but I'm not getting the desired result. Reacts matrix transform is deprecated, so better not use it. I know that it has to be simple trigonometry stuff but I don't have any idea.
I think at first I need to diff the position of the point from the center of the object, then apply a angle, and then? If I use the offset calculated before applying the rotation, i don't get the rotation at the desired point.
Thanks for answers!
here is an image of the problem
I just made a withAnchorPoint function to make transform working with anchor point easier in react-native. https://github.com/sueLan/react-native-anchor-point.
You can use it like this:
import { withAnchorPoint } from 'react-native-anchor-point';
getTransform = () => {
let transform = {
transform: [{ perspective: 400 }, { rotateX: rotateValue }],
};
return withAnchorPoint(transform, { x: 0.5, y: 0 }, { width: CARD_WIDTH, height: CARD_HEIGHT });
};
<Animated.View style={[styles.blockBlue, this.getTransform()]} />
I also wrote an article for it.
So I finally found a way and formular to calculate the offset. The desired point of rotation gets obviously rotated as well, when applying an angle to the object. So what I had to do was getting the position of this point (lets call it pRotated) by using rotationmatrices with the position of both the center (m) of the object and the desired point of rotation (p) like this:
angle = alpha * (Math.PI / 180)
pRotated.x = m.x + (p.x - m.x) * Math.cos(angle) - (p.y - m.y) * Math.sin(angle)
pRotated.y = m.y + (p.x - m.x) * Math.sin(angle) + (p.y - m.y) * Math.cos(angle)
Then it was easy to get the offset using
translateX = pRotated.x - p.x
translateY = pRotated.y - p.y
which then can just be applied to the object, and then its rotated by alpha around point p.
I've attached a scribble for further explanation.
I'm working on a Image cropper, I have somehow figure out how to move the cropper even it's not a perfect solution but it works, but now I want to respond to the border touches/moves of a given View
I'm using this module for the corpping, but actually I'm still stuck at how to respond to border touches/moves
gestureState parameter is sufficient for the task.
x0 and y0 are the top-left coordinates of the responder view, further, moveX and moveY holds the current coordinates of touch.
So moveX === x0 means current touch is at left edge.
Similarly moveY === y0 means current touch is at top edge.
For handling right and bottom edge I suggest you use onLayout in the <View> tag and assign height and width of the view to some variable or in state variable( take care of performances optimisations)
And then use it in similar way:
onPanresponderMove(evt, {x0, y0, moveX, moveY) {
...
if(moveX=== x0 || moveX === x0 + this.state._currentWidth) {
// task for left and right edge response
...
}
...
}
To get view width:
<View {...this._myResponder.panHandlers}
onLayout={ ({width, height}) => this.state._currentWidth = width } />
I need to make script that will change background image position by only scroll of a mouse. Document doesnt have width to be scrolled. It a content slider. The idea is to make parallax scrolling like in Android.
Here is the code I am going to use:
$(window).bind("load resize scroll",function(e) {
var y = $(window).scrollTop();
$("body").filter(function() {
return $(this).offset().top < (y + $(window).height()) &&
$(this).offset().top + $(this).height() > y;
}).css('background-position', '0px ' + parseInt(-y / 6) + 'px');
});
How to make 'body' background to move when mouse wheel is scrolled?