Привет всем,
Возник вопрос, если кто знает решение, плиз, отзовитесь.
Есть картинка-фон, типа часы, есть стрелка.
НО важно то, что стрелка это маленькая продолговатая картинка, которая начинается отнюдь не в центре циферблата. У меня получается вращать ее вокруг своей оси, но как вращать вокруг цетра часов пока понять не могу, нужна формула, которой я похоже не знаю.
Собственно вопрос : как вращать картинку вокруг точки, находящейся за пределами картинки, при этом так как картинка продолговатая, вращаться она должна и вокруг своей оси чтобы указывать и быть параллельной текущему делению на циферблате.
Или хотя бы обьясните как соотносятся друг с другом параметры метода 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>