[英]How can I rotate a div with respect to a canvas that rotates on mousedrag
I have a canvas tube1Ctx and a div with id sineWave.我有一个 canvas tube1Ctx 和一个 id 为 sineWave 的 div。 The canvas is rotated on mouse drag using pure Javascript. Now I need to rotate the div at the same time with respect to the canvas (same angular displacement).
canvas 使用纯 Javascript 在鼠标拖动时旋转。现在我需要相对于 canvas(相同的 angular 位移)同时旋转 div。 When I have tried with below code the transform style not gets updated while drag rotate the canvas. Could anybody please help me to solve?
当我尝试使用以下代码时,拖动旋转 canvas 时变换样式不会更新。有人可以帮我解决吗?
function tubeRotate(e){
if (moveFlag2){
tube1XPos = e.clientX - tube1Canvas.offsetLeft;
tube1YPos = e.clientY - tube1Canvas.offsetTop;
rotate = tube1XPos-((e.clientX-tube1Canvas.offsetLeft));
rotate = (Math.atan(240/rotate))* Math.PI / 180;
tube1Ctx.clearRect(240,10,tube1Canvas.width,tube1Canvas.height);
tube1Ctx.translate(275, 10);
tube1Ctx.rotate(rotate);
tube1Ctx.translate(-275,-10 );
tube1Ctx.drawImage(tube1Img,240 , 10 , 46 , 235 );
var angle=rotate;
document.getElementById("sineWave").style.MozTransformOrigin='0% 0%';
document.getElementById("sineWave").style.MozTransform = 'rotate('+angle+'rad)';
document.getElementById("sineWave").style.webkitTransformOrigin='0% 0%';
document.getElementById("sineWave").style.webkitTransform = 'rotate('+angle+'rad)';
}
Missing quote缺少报价
document.getElementById("sineWave).style.MozTransformOrigin='0% 0%'; document.getElementById("sineWave).style.MozTransformOrigin='0% 0%';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.