set alpha value for Transparent clickthrough window #8200
Labels
Comments
|
my only current option is to, set the alpha to 0 at the pixel where the current mouse position is on the canvas. and its buggy to do it in this way however this does not work with elements like TEXT elements. |
|
current workaround, <html>
<head>
</head>
<body>
<script>
window.onload = () => {
var newgui = require('nw.gui');
var newWindow = newgui.Window.open('other.html', {
position: 'center',
width: 600,
height: 800,
frame: false,
transparent: true,
always_on_top: true
}, function (win) {
win.show();
});
}
</script>
</body>
</html><html>
<head>
<style>
html,
body {
background-color: rgba(0, 255, 0, 0);
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="javascript: start();">
<canvas id="viewCanvas"></canvas>
<script>
function start() {
var mousePOS;
var canvas = document.getElementById("viewCanvas");
canvas.addEventListener('mousemove', function (event) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
mousePOS = { x, y };
});
function draw() {
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
const ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.5;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "rgb(0,0,0)";
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
if (mousePOS) {
var blockSize = 1;
ctx.clearRect(mousePOS.x - blockSize, mousePOS.y - blockSize, blockSize * 2, blockSize * 2); // clear canvas
}
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
}
</script>
</body>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I would like to create a drawing tracing app to overlay on top of MSPaint or any image drawing editor..
the problem is,, alpha needs to be
0for current clickthrough https://nwjs.readthedocs.io/en/latest/For%20Users/Advanced/Transparent%20Window/i would like the opposite, i want to have clickthrough windows, for anything where value is not
1. not clickthrough if its 1/solid. if it has any transparent alpha other then 1/solid, then its clickthroughthis would allow me to overlay anything on a canvas to trace in another drawing app. or to create overlay HUDs that don't block the mouse
The text was updated successfully, but these errors were encountered: