P5.js旋转后如何沿轴平移
p5.js how to translate along axes after rotate
当我旋转一个坐标系统后,它会沿着它的新轴进行平移。有没有可能在旋转之前沿着坐标轴平移它?
的想法是,用户上传的图像,然后他可以旋转它,缩放它,并移动它周围的视窗中间。不知怎么的,我没能一次实现所有这些功能。
有什么建议吗?
编辑。有一块帆布。我在这里画一个图像。然后我旋转它90°我想让它在X轴上平移。它在屏幕上向下移动。因为坐标轴是反过来的
编辑下面是我用于转换的代码片段。图像总是在它的(0,0)点旋转。这就是为什么我把它转换成在中点旋转的方式。之后,我在偏移点绘制图像。
p.push();
p.translate(canvasWidth/2, canvasHeight/2);
p.rotate(angle * p.TWO_PI/360);
var x = -loadedImage.width/2 - offsetX;
var y = -loadedImage.height/2 - offsetY;
p.image(loadedImage, x, y);
p.pop();
编辑我决定先平移,然后旋转。它使得平移是正确的,但是它围绕错误的枢轴点旋转。我不可能事事如意
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.save();
ctx.fillStyle="red";
ctx.translate(100,0);
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(0, 0, 100, 50);
ctx.restore();
ctx.fillRect(100,0,50,50);
在你的代码中使用drawImage而不是fillRect
相关文章:
- Morris.js折线图x轴标签在调整大小后消失
- 在d3.js中对x轴上的日期进行排序
- 使用tween.js围绕世界轴旋转对象
- highchart js,x轴上的tickinterval为2年(奇数年)
- NVD3.js多图形,具有固定的x轴和y轴
- charts js更改折线图轴的字体大小/颜色和背景线
- 我们可以设置cubsm.js的y轴没有上限吗
- D3.js轴刻度条件格式
- d3.js轴标签-颜色不变
- 图表.js 2.0 使用货币和千位分隔符格式化 Y 轴
- 酒窝 JS 多个 y 轴 - 更改默认排序
- 如何使用自定义功能覆盖时间轴对象.js时间轴对象的_repaintMinorText
- 使用 c3 js,有没有办法在放大时显示更多的 x 轴值
- 三.js轨道控制.js可以改变反Y轴旋转吗?
- NVD3.js-缺少X轴刻度
- 时间轴.js如何将鼠标悬停事件添加到可视化项目框框
- 无法在WebGL中创建沿轴旋转的3D Koch
- 在Pixi.js中旋转后沿y轴缩放
- P5.js旋转后如何沿轴平移
- Verite's时间轴js ERA和BC错误