raphael.js를 사용하여이 픽셀 효과를 얻을 수 있습니까?

웹 페이지에서 이미지를 점진적으로 픽셀 화하고 전환으로 픽셀 화를 애니메이션으로 만들고 싶습니다. 픽셀 화는 작은 픽셀을 사용하여 시작하고 픽셀은 점차 커집니다. 마지막으로 픽셀 화는 뒤집어서 두 번째 이미지를 나타냅니다.raphael.js를 사용하여이 픽셀 효과를 얻을 수 있습니까?

저는 pixelate 효과 here과 같은 효과를 찾고 있습니다. 전환으로 pixelate를 선택한 다음 이미지를 클릭해야합니다.

네, 그 라이브러리를 사용할 수는 있지만 이미 라파예트 캔버스가 있고 이것이 가능할 지 여부를 알기를 원합니다.

출처

2011-11-16 codecowboy

나는 최상의 옵션이 픽셀 화를 위해 다른 라이브러리를 사용하는 것 (라이센스에 신경 쓰지 않는다면 링크 된 것과 같다)이라고 생각합니다. Raphael.js는 벡터 라이브러리이므로이 효과를 지원하지 않습니다. Raphael.js SVG를 이미지로 변환하고 효과를 적용 할 수 있습니다 (this 참조).

참고 : 이것은 직접적인 해결책은 아니지만 해결책을 찾는 다른 사용자를 위해 픽셀 효과를 얻는 또 다른 방법을 제시합니다.

프로젝트는 close-pixelate입니다. HTML5 캔버스 요소를 사용하여 이미지를 픽셀 화 된 버전으로 변환 할 수있는 스크립트이며 MIT 라이센스에 따라 라이센스가 부여됩니다.

GitHub 프로젝트 페이지는 here입니다. 추가 예제는 here입니다.

사용법 : 픽셀 화 효과를 확장 CSS 속성으로 기본적으로 지원하기 때문에

document.getElementById('portrait-image').closePixelate([ 
    { resolution : 24 }, 
    { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 } 
]);

출처

2011-12-04 03:15:01 kubetz

라파엘은 실제로 래스터 그래픽으로 작동하지 않습니다. 벡터 라이브러리입니다. 그것을 캔버스에 구현하십시오.

출처

2011-11-30 20:25:18

Internet Explorer 용 정말 아주 간단합니다. 픽셀 화 효과에 대한

IE 만 CSS 속성 :

http://phrogz.net/tmp/canvas_image_zoom.html

: 브라우저의 나머지 부분

-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1)"; 
filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1);

, 당신은 아래와 같은 코드를 기반으로 자신 만의 솔루션을 개발할 수 있습니다

출처

2011-12-06 10:41:16

raphael.js를 사용하여이 픽셀 효과를 얻을 수 있습니까?

답변

관련 문제