jquery rotate: возможно ли изменение точки вращения?(преобразовать функцию холста) - PullRequest
Новая
       12

jquery rotate: возможно ли изменение точки вращения?(преобразовать функцию холста)

0 голосов
/ 15 февраля 2011

Я пытаюсь сделать анимацию, поворачивая изображение с помощью плагина jquery roate.К сожалению, этот плагин не меняет свою точку вращения, он всегда центрирован ... и у него нет параметра для этого

Я обнаружил, что делая это с помощью canvas, я могу установить его с canvas.transform () function.

Я новичок в работе с canvas, но если кто-нибудь может дать мне пример, как это сделать, я буду очень признателен.

вот плагин поворота изображения: http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

здесь сделано с холстом .. (но немного плохо, потому что он оставляет следы. Не знаю, почему http://jsbin.com/ipeqi3/2)

1 Ответ

0 голосов
/ 15 февраля 2011

Это то, что я имею до сих пор, на самом деле оно вращает изображение, изменяя точку поворота с помощью translate (не преобразуйте, мой плохой ...)

Что он не делает, тот не делаетсоздать плавную анимацию, это очень грубо .. Как я могу это сделать?

Еще одна вещь, которая мне нужна, это то, что фон должен быть прозрачным

вот мой код: 

<script>
var degree=10;

function docanvas() {
     var canvas = document.getElementById('canvas');
var cContext = canvas.getContext('2d');

 var img = new Image();   
  // Create new Image object     
  img.src = 'http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG'; // Set source path // set img src 


var cw = img.width, ch = img.height, cx = 0, cy = 0;


canvas.setAttribute('width', 300);
canvas.setAttribute('height', 300);

cContext.fillStyle = "rgba(0, 0, 255, .5)";
cContext.fillRect(0, 0, 300, 300);

cContext.translate(150, 150);


cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, -64, -128,128,128);

    degree+=5;

}
</script>


</head>
<body onload="setInterval('docanvas()',50);">
<canvas id="canvas"></canvas>
<script>
       docanvas(30);
</script>       
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...