Há algúm tempo eu quis fornecer a funcionalidade da borda de borracha para um serviço adicional de Firefox que eu desenvolvesse que usado o elemento da lona HTML5 como uma superfície do desenho. Previamente executando a borda de borracha em um elemento da lona HTML5, mas fazendo assim no sistema da janela de X e em Microsoft Windows, eu pensei que seria algo que seria relativamente trivial executar. Apenas encontre as rotinas apropriadas, obstrua-as em minha aplicação e e declare-o a vitória. Muito a minha surpresa quando eu fiz uma busca do Internet no tópico mim encontrou a informação útil muito pequena no assunto.
Porque qualquer um que me conhece bom atestará, eu gosto de um desafio - mais difícil o melhor - e tão apenas foi adiante e desenvolveu minha própria versão da borda de borracha no elemento da lona HTML5. Para simplificar o usual torne/teste/eliminam erros do ciclo (que é um mais demorado do que usual quando você está desenvolvendo um serviço adicional de Firefox), mim decidiu escrever uma aplicação pequena de XULrunner que suporte a borda de borracha e demonstre um número de operações na área dentro da caixa unida de borracha. Eu escolhi executar a imagem que graying, gravando, lanç e invertendo para ver como caro estas operações seriam executar no Javascript. Há muitas execuções do Javascript destas operações da manipulação da imagem disponíveis no Internet mas, outra vez, em nenhuns que eu poderia facilmente encontrar que operações da sustentação em partes de uma imagem um pouco do que a imagem inteira.
Por que XULrunner? Simplesmente porque é lig firmemente a Firefox e a outros projetos de Mozilla tais como Thunderbird. Se a borda de borracha trabalhou dentro de uma aplicação de XULrunner, havia uma possibilidade muito boa que trabalharia dentro de um serviço adicional de Firefox e de outras aplicações de Mozilla com modificações menores. De facto, este provou ser o caso.
Você pode tentar a aplicação aqui. Nota exige um navegador de Firefox. Outros navegadores não compreendem uma aplicação de XULrunner e não consideram simplesmente a aplicação porque uma lima a ser transferida.
 |  |
A imagem à esquerda é a imagem não editada e a imagem à direita é um exemplo de uma operação da gravação, de uma operação da aleta, de uma operação invertida e de uma operação cinzenta que ainda tenha a borda de borracha em torno da área selecionada.
Está aqui o código fonte cheio para a aplicação de XULrunner:
Toda a funcionalidade da borda de borracha é contida dentro do doDrawstart de três rotinas, faz DrawUpdate e doDrawStop. O código deve ser compreensível por todo o programador experiente do Javascript. Eu não usei o método clássico de XOR de gerar uma faixa de borracha visível. Em lugar de eu escolhi usar o strokeRect para output uma faixa de borracha vermelha contínua. Para remover a faixa de borracha, eu restaurei os pixéis sob a faixa de borracha (que eu conservei antes de extrair a faixa de borracha).
Esta aplicação não é à prova de balas. É apenas uma prova de conceito. Tem alguns erros menores nele que eu estou ciente de. Por exemplo, a rotina da gravação não segura o primeiro pixel esquerdo e a fileira superior dos pixéis corretamente. Você pode ver este quando você seleciona a opção da gravação e não removeu ainda a faixa de borracha vermelha.
Olhando atrás das cenas (veja nsIDOMCanvasRenderingContext2D.idl) em como a sustentação para o elemento da lona é executada em Firefox, eu descobri que a lona está executada sobre biblioteca popular dos gráficos de vetor do Cairo a 2D. A biblioteca dos gráficos do Cairo foi desenvolvida original para o sistema da janela de X por Keith Packard e por valor de Carl mas tem sido expandida desde então a uma biblioteca mais de uso geral dos gráficos.
Finalmente, para aqueles leitores que são estranhos com o elemento da lona HTML5, Mozilla tem um bom curso introdutório. A ópera igualmente tem o bom curso no assunto.
Aprecie!
