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);
});
};
Related
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.
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 configuring a picture upload button on a form. I have a green bootstrap button I am happy with, but Chrome still gives me a default, grey, pic upload button.
You can see the grey button underneath the green "Upload Project Picture" button.
I have searched my code, but can't find any way to hide it. My colleague (who is fairly experienced), has no idea either. Thanks if you can help.
I found this question, but am not sure if it's exactly the same issue:
How can I hide a button if JavaScript is disabled?
I think the best approach is to position the native element absolutely, and then move it far to the left of the viewable screen. You can then make your fancy custom submit button "be" the actual submit via javascript. Sounds hacky, but a similar solution is recommended by no less than Mozilla.
input[type=file] {
/* original submit tag pushed outside the viewport */
position: absolute;
left: -1000em;
}
I have:
self.setScene(QtGui.QGraphicsScene(self))
self.setTransformationAnchor(QtGui.QGraphicsView.AnchorUnderMouse)
self.setDragMode(QtGui.QGraphicsView.ScrollHandDrag)
where self is QGraphicsView. I am opening my svg in QGraphicsWebView() because of it's interactivity like this:
s = self.scene()
s.clear()
self.resetTransform()
self.webview = QGraphicsWebView()
self.webview.load(QtCore.QUrl(path_to_my_svg))
self.webview.setFlags(QtGui.QGraphicsItem.ItemClipsToShape)
self.webview.setCacheMode(QtGui.QGraphicsItem.NoCache)
self.webview.setZValue(0)
s.addItem(self.webview)
Zooming works fine, but when I click over webview item in order to drag it, nothing happens except cursor is changed to text cursor. I can drag svg only when I open it like self.svgItem = QtSvg.QGraphicsSvgItem(path_to_my_svg) but in that case it's rendered as static image so I lose interactivity in svg(mouseover, mouseout in svg elements)...
EDIT based on xndrme's comment:
As he suggested SHIFT+mouse left click works well, but it drags the whole SVG which is inside self.webview. Apparently I've thought that when I zoom with mouse scroll svg gets zoomed, but actually self.webview is the one that gets zoomed and scroll bars appears. So, what I've actually need to know is how to drag the whole self.webview within its scroll bar boundaries (with left mouse click)