I'm learning how to make a script that creates a circle following the mouse cursor similar to the script below:
https://www.kirupa.com/canvas/follow_mouse_cursor.htm
This script will darken the whole website except for the part inside the circle, which will be visible at normal brightness.
However, using the author's canvas approach the user can not interact with the website underneath, as there is an overlay over the website.
Any input is appreciated.
Since HTML works in layers, there's really no way to have an element under the mouse and properly interact with the elements underneath.
Instead, what you may want to think about, instead of showing only whats under the mouse, hiding everything that isn't under the mouse.
The could be achieved by creating elements that stay a number of pixels away from the cursor, leaving a window into the site.
I made an example of this on JSFiddle, here is the important part using JQuery (although it could easily be done in plan JS as well).
var offset = 50; //the area around the cursor that is visible
$("body").mousemove(function(e){
var newPos = (e.pageX - offset);
$("#left").width(newPos);
$("#top,#bottom").css("left", newPos);
newPos = (window.innerWidth - (e.pageX + (offset + 17)));
$("#right").width(newPos);
newPos = (e.pageY - offset);
$("#top").height(newPos);
newPos = (window.innerHeight - (e.pageY + offset));
$("#bottom").height(newPos);
})
JSFiddle with full code. Note that the text can still be selected as usual.
Related
I am using Ariutta's svg-pan-zoom with svg.js. I have disabled the native Arriuta doubleclick functionality and have tried adding my own, which ultimately consists of a pan adjustment and an animation.
Usually this works fine, but sometimes when I load my page the doubleclick function acts strangely. According to my debugging, it looks like sometimes when my app loads, the doubleclick function I wrote is called twice for each doubleclick. This causes the animation to behave strangely, and there seems to be no consistent basis for when this issue arises. Restarting my server sometimes works, and sometimes doesn't. I pretty much just have to continue reloading my page until the issue goes away.
My initial thoughts are that maybe there is something off in the load order of my files, and sometimes things load out of order. Currently investigating this. My other thought was that maybe this has something to do with the svg.js animation library or my trying to replace the native double-click function in arriuta's plugin. Thoughts?
myApp.service('AnimatorService', function(){
this.dblClickBehavior = function(svgCanvas, zoom){
$('.node').dblclick(function(){
// get pan
pan = zoom.getPan();
// get screen width and height
var sizes = zoom.getSizes();
var centerX = (sizes.width)/2;
var centerY = (sizes.height)/2;
// get center position of svg object double clicked
var x0 = this.instance.first().attr('cx');
var y0 = this.instance.first().attr('cy');
//determine the correct pan value necessary to center the svg
panAdjustX = centerX - x0*sizes.realZoom;
panAdjustY = centerY - y0*sizes.realZoom;
//center the svg object by adjust pan
zoom.pan({'x' :centerX - x0*sizes.realZoom, 'y' : centerY - y0*sizes.realZoom});
//simple animation on the object
this.instance.first().animate().radius(centerX);
});
}
});
When it behaves correctly, the svg image centers and then grows. When it behaves incorrectly, it centers and then shrinks into nothingness.
You tagged svg.js so I will give an svg.js answer. There is a plugin svg.panZoom.js now which can be used to easily implement the functionality you want:
var canvas = SVG('container').viewbox(0,0,1000,1000)
canvas.image('https://www.zooroyal.de/magazin/wp-content/uploads/2017/05/cat-2783601_1920.jpg', 1000, 1000)
.attr('preserveAspectRatio', 'none')
canvas.on('dblclick', function(e) {
var p = this.point(e.pageX, e.pageY)
var zoomLvl = 3
// zoom into point p to zoomLvl
canvas.animate().zoom(zoomLvl, p)
})
Here is a fiddle: https://jsfiddle.net/Fuzzy/95t6oL8y/5/
When you want to be able to panZoom your svg, too. Just add a call to canvas.panZoom()
I have figured out a nice effect from application that needs several UI elements but also requires as much screen space as possible.
Idea of the effect is, that the UI buttons almost dissapear as soon as you move the mouse too away from them.
I have made a jsFiddle in case you'd like to see it.
It's quite simple:
window.addEventListener("mousemove", function(e) {
var rect = element.getBoundingClientRect();
//Measuring distance from top-left corner of the div
var top = rect.top+(rect.bottom-rect.top)/2;
var left = rect.left+(rect.right-rect.left)/2;
//Mouse position
var x = e.clientX;
var y = e.clientY;
//Thank pythagoras for this
var distance = Math.sqrt(Math.pow(x-left, 2)+Math.pow(y-top, 2));
//Brightness in interval <1, 0.1>
var brightness = Math.min(1, Math.max(0.1, 100/distance));
element.style.opacity = brightness+"";
});
This jsFiddle was also supposed to demonstrate problem I have - but it runs unexpectedly smoothly.
The problem is, that the browsers seem to buffer the CSS changes if they are too frequent. This is a very smart performance strategy but in my case it quite breaks the effect.
I have also uploaded test script here. In Google Chrome, buffering appeared to be so strong (and unsynchronized), that the buttons sometimes flickered.
Should I implement some frame-skip so that the browser buffer is not initiated by the animation effect?
My buttons have their bottom border cut off. If you'd know why this happens, please let me know in comments
I implemented a simple draggable world map for a game but the performance differs when using different browsers - which is kinda obvious. I used 256x256 pixle tiles and the script dynamically renders the number to fill the whole window plus borders.
Prototype: http://mt111102.students.fhstp.ac.at/draggable/game.html
Currently I'm doing it simply by setting the top and left style attributes on mousemove. Heres a snippet:
mouseDown : function(e) {
Map.myPreventDefault(e);
dx = map.offsetLeft - e.clientX;
dy = map.offsetTop - e.clientY;
map.addEventListener('mousemove', Map.divMove, false);
},
divMove : function(e) {
Map.myPreventDefault(e);
map.style.position = "absolute";
map.style.cursor = "move";
map.style.left = e.clientX + dx + "px";
map.style.top = e.clientY + dy + "px";
}
Later when dragging to the borders I'm gonna load new tiles with XHR and delete old ones on the other end to retain performance so that the wrapper doesn't get to big.
My question is: Would it be more performant by using CSS translate instead of just setting the top and left attributes? And do you guys have any tips how to make it smoother?
In Firefox the prototype works almost perfectly smooth but in Webkit browsers like Chrome it doesn't look very good - it lags a bit. I just wonder how Google Maps managed it to work in every modern browser with the same smoothness.
A CSS transform, especially with a Z value (which will load the transform into the GPU), will almost always be faster and smoother - especially on devices like iPads, but elsewhere as well.
For more details you can check out this tutorial on GPU acceleration:
http://creativejs.com/2011/12/day-2-gpu-accelerate-your-dom-elements/
Here's my problem, it's long, but actually very simple, please at least skim it if you will.
I take a div called 'app' and drag it around the page. Works fine. Except occasionally when i grab the div and drag instead of dragging the div only an image of the div drags(in firefox & webkit browsers, not ie) and the mouse cursor turns into a circle with a line through it. This greatly compromises the interactivity of the webpage and i don't think its so much a coding issue as a browser issue.
I'll show the code used to drag below but first you should probably know that in order to drag I use three sets of variables, X1 & Y1 is the pageX and pageY (clientX or clientY depending on the browser) and or recorded every time the mouse moves.
X2 & Y2 are set when the mouse is pressed on the div, and are the difference between the mouse position and the current top & left position of the div, they are used so that when the div is dragged the mouse position isn't equal to the top left corner.
And finally dX and dY (short for delta X and delta Y) are the equal X1 - X2 and Y1 - Y2, they too are set when the mouse moves and equal the change in X and the change in Y.
Sorry for the explanation but i figured it might help clear up any confusions with the following code, here is the dragging code.
app.onmousedown = function() {
X2 = app.offsetWidth - ((app.offsetWidth + app.offsetLeft) - X1);
Y2 = app.offsetHeight - ((app.offsetHeight + app.offsetTop) - Y1);
main.onmousemove = function() {
dX = X1 - X2;
dY = Y1 - Y2;
app.style.top = dY + 'px';
app.style.left = dX + 'px';
}
}
Note the main div is simply a container holding all elements of the page, and is used for convenience because it equals the size of the web page.
And that's my issue really, as i said before it only occurs sometimes other times it works perfectly fine, without any errors. Yet it occurs often enough to be a problem. I know it's possible to get this working because i've seen drag and drop demos that don't suffer form this problem. So if anyone knows or has any ideas it'd be very much appreciated if not thanks anyway for bothering to read this i know it was long sorry for that.
ps: please don't suggest javascript frameworks instead, i'm not a fan of them. It's mearly a preference of mine i don't hate them i just prefer javascript.
try adding the attribute ondragstart="return false;" to the img tags, this should disable the browser built-in drag and drop funcitonality. You usually also need to do this for a tags
There doesn't seem to be a good way to base the <canvas> viewport on the location of the mouse pointer and being able to move around freely. Basically, like every other first-person game on the market.
There is no way to capture the mouse
inside a <canvas> element.
There is no way to set the position
of the mouse pointer.
It is not possible to go full screen
with <canvas>, and even if, once the edge has been reached, functionality will be broken.
For good reasons, too. Imagine what possible scenarios could (and definitely would) be employed by malicious persons.
Perhaps it's too early to be thinking of something that is almost only of any use in a 3D environment, something that there isn't yet a spec for.
What's your take or solution?
You can get the mouse position inside of a canvas.
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
var cell = new Cell(Math.floor(y/kPieceHeight),
Math.floor(x/kPieceWidth));
return cell;
}
From Dive Into HTML5: Let's Call it a Draw(ing Surface)
I don't think there is a good solution for this -- at least, not until we get mouse locking. No matter how elegant your solution, if you make a twitchy mouselook driven game, the user is going to twitch outside the canvas area at some point. Even if they don't accidentally click a link, their immersion will be broken when the view stops responding to their mouse.
For slower paced games, you could:
Use click and drag to turn. Once user starts dragging within the canvas, you use the mouse delta from the point where they started dragging to determine how far to turn. Because the user is holding down the button, they won't accidentally click things.
Hover cursor near the edges of the canvas to turn, similar to an RTS. This would turn more slowly, but is probably the most intuitive, and easiest for a user to accidentally discover.
Use the keyboard to look, like pre-mouse FPS games (such as Doom).
It's worth noting that there is an open feature request in Firefox for mouse locking. But, unfortunately, neither this, nor mouse hiding or fullscreen are part of the WebGL spec.
All of these features are supported by Unity, so that may be a path to look at if you really need FPS controls.