I don't know how to properly explain this.
I have a svg element which is a big rectangle. If i scroll down, then click on my element, the click isn't registered where my mouse is, but where my mouse would be if i didn't scroll down.
So, if i scroll down by 100px and click on my rectangle, the click will be registered 100px above where i actually clicked.
It's behaving as if i hadn't scrolled down.
Edit: I'm using event.clientX and event.clientY to get the mouse position.
I'm new to svg and i don't know the right keywords to describe my problem.
I'm using svg.js, though i don't think it's relevant to the problem.
I assume this is a well known thing. Can someone point me in the right direction? What kind of keyword am i looking for here?
The problem seems simple enough, i just need to know what to search for.
Thank you.
The problem was the utilization of (event.clientX, event.clientY) to get the mouse position.
In the presence of a vertical and/or horizontal scroll, using these properties caused a mismatch between where the mouse appeared within the page and the mouse position provided by (event.clientX, event.clientY).
I was using the mousedown event, with the mousemove event to create a selection rectangle, similar to what you can find in video games. When horizontal or vertical scrolling had been applied, my selection rectangle didn't appear where my mouse was.
This was solved by using event.pageX and event.pageY (instead of clientX and clientY).
Thank you to #ccprog for pointing me in the right direction.
Related
I'm trying to remove the blue box that appears around focused buttons in Godot. I saw here that it can be done with "StyleBoxEmpty", but the example picture is a broken link. I have looked through all the node properties, but I cannot find it. Can someone clarify how to enable this property?
Okay, I figured it out...
To remove the unwanted blue "style box" border around focused buttons, do the following:
In the inspector for the button node, scroll down until you find "Custom Styles", expand.
Under the focus property, set the null value to StyleBoxEmpty.
Done.
It is a great library. It works well. Thank you Bumbu Alex and Anders Riutta and all the contributors. Well I got stuck. I have tried a lot. I guess the answer is nearby.
When I zoomIn by wheel or pinch (no matter) it zooms well in and out. When I reach zoom back by 1 it stays in place.
But when I
ZoomIn 2 times (for example)
Move my mouse cursor away (1 inch for
example)
ZoomOut all the way and my elements are all off. So nothing
centered anymore. It is applied a pan. Half elements are got cut off
of the viewport.
So it is not a bad. I guess I use it wrong. I have tried thousand times to resize it back but nothing works for me. I appreciate any help. Thank you.
It is normal behaviour as zooming with a mouse zooms based on current mouse position. Same goes about zooming out.
If you want to achieve zooming in and out that is always the same then you'd have to:
disable default mouse handing
add your own listener for mouse scroll events
when mouse scroll is fired - zoom in our out
(This demo) has some similar changes.
If you just want to centre the contents then you can use .center() or .contain() methods (you may also need to call .fit()).
I'm currently trying to implement the toolbar which is fixed to the right side of the screen. Initial state works fine. When I try to dynamically change the content width from the app, BrowserWindow is resized well, but there's a blink on the wrong location due to the delay between setPosition() and setSize().
To get a better idea about this:
Is there a way to either set the position and width at once, change the anchor point from top-left corner to top-right, rerender when its all done or anything else that would prevent the app from blinking when changing BrowserWindow width when doing this?
The way I currently do expand:
setSize() Change width from 75px to 475px
setPosition(): Recalculate position because we want it to stick to the right border of the screen and expand content from right to left
I've already tried with setBounds but it results in the same delay between this 2 actions.
This is a new one for me. In Design view I am unable to see the first 150 pixels of the design view window-- including the buttons/options to the left of the AppTheme button. I've tried the Pan and Zoom tool, which seems to do nothing. It shows the full view and blueprint view filling the Pan and Zoom tool interface. Any idea how to fix this:
"Window" -> "Restore Default Layout" worked for me.
I had the same problem.
Just drag the mouse where your projects are to the far left of the screen and slowly move with your mouse over to the right until you will see somewhere in the middle resize pointer- thats your design view border. Click it and move to the right and it should appear!
If you want i can try to make a gif how to do it if the above does not help.
I'm trying to animate a search icon with Snap.svg. You can see that here on my Codepen, the search icon.
I use transform scale to have my icon "bouncing" on each click : loupe.animate({transform: 's1.2s.8'},300,mina.easeout);
The animation runs well except on first click, where it just scales down, then on the second click the effect is ok.
Same behavior with the refresh icon (at the bottom of the Pen), the rotation animation turn in the wrong sense on first click althought I reset transform before animate.
I guess maybe my icons aren't scaled and rotate on good position before first click but I can't find where I could check/set that.
Thank you very much for your help !
Hugo
Use absolute values by using capital letters:
loupe.animate({transform: 'S1.2S.8'},300,mina.easeout);
For the refresh icon, change the rotation from R180 to R-180 and R360 to R0. This seems to work consistently.
clicRefresh = function() {
fleche.stop().animate({transform: 'S.6,.6 R-180 114.75 122.5'}, 400, mina.easeout, function() {
fleche.stop().animate({transform: 'S1,1 R0 114.75 122.5'}, 600, mina.easeout);
});
};