Вращение с вложением в canvas.transform :)
Вложений: 2
Привет всем,
Возник вопрос, если кто знает решение, плиз, отзовитесь. Есть картинка-фон, типа часы, есть стрелка. НО важно то, что стрелка это маленькая продолговатая картинка, которая начинается отнюдь не в центре циферблата. У меня получается вращать ее вокруг своей оси, но как вращать вокруг цетра часов пока понять не могу, нужна формула, которой я похоже не знаю. Собственно вопрос : как вращать картинку вокруг точки, находящейся за пределами картинки, при этом так как картинка продолговатая, вращаться она должна и вокруг своей оси чтобы указывать и быть параллельной текущему делению на циферблате. Или хотя бы обьясните как соотносятся друг с другом параметры метода transform и координаты в пространстве. Спасибо за любые ответы и ссылки. Вот кусочек кода :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Canvas :: Sample #1</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
</head>
<body>
<script type="text/javascript">
var indicatorClass = {
rotationIncrement : 10,
rotationRadius : 40,
rotationAngle : -105,
getRadianAngle : function (degreeValue) {
return degreeValue * Math.PI / 180;
},
initCanvas : function () {
var indicatorData = $ ('.indicator'),
pointerImage = indicatorData.find ('.pointer');
var canvasData = $ ('#canvas').get (0),
contextData = canvasData.getContext ("2d"),
rotationArrow = pointerImage.get (0);
setInterval(function () {
indicatorClass.rotationAngle += 10;
indicatorClass.rotationIncrement++;
indicatorClass.setTransform (contextData, indicatorData, rotationArrow);
}, 100);
},
setTransform : function (contextData, indicatorData, rotationArrow) {
var sin = Math.sin(indicatorClass.rotationIncrement * Math.PI / 6);
var cos = Math.cos(indicatorClass.rotationIncrement * Math.PI / 6);
contextData.clearRect (0, 0, contextData.canvas.width, contextData.canvas.height);
contextData.save ();
contextData.translate(indicatorData.width () / 2, indicatorData.height () / 2);
contextData.transform(cos, sin, -sin, cos, 0, 0);
contextData.drawImage(rotationArrow, -rotationArrow.width / 2, -rotationArrow.height / 2);
contextData.restore ();
},
setRotation : function (contextData, indicatorData, rotationArrow) {
contextData.clearRect (0, 0, contextData.canvas.width, contextData.canvas.height);
contextData.save ();
contextData.translate(indicatorData.width () / 2, indicatorData.height () / 2);
contextData.rotate(indicatorClass.getRadianAngle (indicatorClass.rotationAngle));
contextData.drawImage(rotationArrow, -rotationArrow.width / 2, -rotationArrow.height / 2);
contextData.restore ();
}
}
window.onload = function () {
indicatorClass.initCanvas ();
}
</script>
<style type="text/css">
.indicator {
width:120px;
height:120px;
border:1px solid #ccc;
text-align:center;
position:relative;
}
.indicator .pointer {
visibility:hidden;
}
.indicator #canvas {
z-index:10000;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
</style>
<div class="indicator">
<img class="image" src="usage_icon_electro.png" alt="" />
<img class="pointer" src="usage_electro_pointer.png" alt="" />
<canvas width="120" height="120" id="canvas"></canvas>
</div>
</body>
</html>
|
|
Ooo, точно вот что надо менять, вы почти угадали, надо было только стрелку выше расположить, вот так.
Спасибо большое!!! http://www.jsfiddle.net/RTq5N/21/ П.С. пьяный вариант мне тоже понравился :) так тоже интересно выглядит : var sin = Math.sin(indicatorClass.rotationIncrement * Math.PI / 6) + 1; |
Цитата:
contextData.transform(cos, sin, -sin, cos, -6, 0); |
Спасибо, но сама стрелка и должна быть посередине, это бекграунд сдвинулся, у меня это исправляется стилями.
|
|
Цитата:
Цитата:
Можно сохранять все что сделал и пр. Лично я им пользуюсь ежеминутно)) |
А ещё что нибудь эдакое Вы знаете? :)
|
в каком смысле?
|
Ну http://www.jsfiddle.net - это в моём понимание "эдакое" )))
У Вас есть ещё что нибудь эдакое? Ну не знаю, может Вы знаете какой нибудь ещё framework вроде Raphael или ещё что? |
Цитата:
Я не придаю особое значение подобным вещам, потому что пользуюсь ими по необходимости, может еще что-то есть но так сказать не могу. Об этом лучше на хабре искать информацию. |
| Часовой пояс GMT +3, время: 07:52. |