Pergunta sobre html5, canvas, html5-canvas – Captura de tela em HTML5Imagem usando pontos?

2

Eu preciso desenhar uma imagem usando 4 pontos. Eu tenho esses 4 pontos armazenados em uma matriz, essas posições mudam. Agora preciso desenhar uma imagem que reflita essas posições. O context.drawImage só aceita uma posição.

Deveria ser assim, 4 posições:

x,y----------x,y
 |            |
 |            |
 |            |
 |            |
 |            |
x,y----------x,y
Então, para esclarecer eu entendi corretamente, a imagem tem uma chance de ser torto, não perfeitamente quadrado? Daedalus
Não perfeitamente quadrado, correto. Forested

Sua resposta

2   a resposta
4

m de renderização 3D.

Você costuma dividir sua forma em dois triângulos (faces) e desenhá-los individualmente usando um preenchimento de textura.

Aqui está uma solução (complexa) para o problema:https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L838 Motor 3D Three.js usando 2D<canvas> como o mecanismo de renderização.

Como a questão não é tão simples, sugiro que você use o Three.js ou um wrapper similar que fornece abstração de alto nível sobre operações de face texturizadas. Confira outros Three.js 2D<canvas> exemplos e você começa a idéia de como funciona:

http://mrdoob.github.com/three.js/

Link fixo (verifiquei que o link original apontava para uma função chamada patternPath de volta quando foi postada):github.com/mrdoob/three.js/blob/r91/examples/js/renderers/… Shaun Lebron
5
Quad Warping é o que você precisa, sem 3D complexo

ngulo possível, não retangular.

A maneira correta de fazer isso é calcular a matriz de transformação, sem necessidade de renderizar conteúdo 3D real. Isso é feito calculando uma matriz de homografia. Para isso, você precisa entender as matrizes de transformação e implementar algum código para resolver algumas equações.

Este processo é bem compreendido e requer as quatro coordenadas originais e o alvo quatro pontos e você os tem, então você só precisa de um processo para calcular a matriz de transformação. Esta matriz é calculada basicamente pela eliminação de Gauss-Jordan.

Verifique isso no solucionador de matriz e no procedimento geral. Depois de entender as transformações, é trivial fazê-lo. Além dissoverifique isso para entender o que é uma homografia. Eaqui é explicado como é calculado, com amostras para javascript e CSS.

Demonstração

Aqui está uma demonstração incrível com fonte e explicação.

Ótimo link de demonstração +1 Material incrível: o Fidel90
Na verdade, existem duas maneiras (pelo menos) de mapear um quad para um retângulo. O outro que eu conheço éinterpolação bilinear. É o que as pessoas sem lógica matemática conseguem, quando tentam implementá-la intuitivamente, mas distorcem as diagonais em curvas. hippietrail

Perguntas relacionadas