Rato absoluta Posições sobre Processamento
-
19-08-2019 - |
Pergunta
Esta é uma cópia colar de um post que fiz sobre o fórum de processamento (onde eu não tenho uma resposta até agora) pensei que eu poderia muito bem tentar aqui.
O processamento é uma maneira muito legal para desenhar coisas, especialmente para as páginas da web. Assim como uma referência http://processing.org
Ei, eu sou novo para o processamento, eu estou usando-o para fazer um site sem Flash, então eu estou praticamente desenho em uma tela.
Eu estou tendo um problema com a posição do mouse, embora as coordenadas, ao desenhar, considere o canto superior esquerdo para ser posição 0,0; as coordenadas reais do rato considerar a 0,0 a ser o no canto superior esquerdo da janela do navegador.
Então, meu problema é este, a tela está operando em uma página web centrada, sempre que o navegador muda de tamanho, o mesmo acontece com as coordenadas do mouse dentro da tela.
Existe alguma maneira de fazer as coordenadas do mouse em relação à tela? Para que eu possa alterar o tamanho da janela do meu navegador e no canto superior esquerdo será sempre 0,0 para as coordenadas do mouse?
Então esse é o problema, eu não sei quantos ppl aqui em stackoverflow tem experiência com isso, mas espero que alguém poderia me ajudar:)
graças à comunidade de estouro de pilha de antecedência.
Solução
Eu não estou familiarizado com o processamento, mas você não pode simplesmente calcular a diferença entre o canto esquerdo superior da janela do navegador e no canto superior esquerdo da tela?
isto é, (usando jquery)
$(window).onresize = function() {
//offset return position realive to the document.
var offset = $('#canvas').offset();
window.canvasLeft = offset.left;
window.canvasTop = offset.top;
}
Em seguida, você pode fazer algo como:
relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;
Você deve substituir #canvas com um seletor CSS para a sua área de lona.
Além disso, observe que a janela é o objeto global, eu usá-lo aqui para lidar com possíveis problemas de escopo.
Outras dicas
Processamento realmente não se destina para a criação de páginas web .. É de pior que o Flash para sites (processamento de esboços sendo applets Java - Java sendo menos comum, muito mais recursos e lento para carregar .. )
Dito isto, não é Processing.js , uma porta Javascript de Processamento.
O exemplo cobra acessa o mouse. Uma vez que é Javascript, ea tela é uma div
, as coordenadas devem ser um pouco mais são do que Java (que vive em seu próprio mundo VM), mas posso estar errado ..
Você pode perguntar ao usuário para calibrar o sistema, antes do uso. Não é totalmente uma resposta para a pergunta, mas um sollution para o problema.
Basta desenhar um ponto vermelho no centro da tela, superior esquerdo e bottem direita. Peça ao usuário a clicar sobre eles, e recuperar as coordenadas. Então, você sabe onde os cantos da tela é.