canvas旋转，水平垂直镜像

最新推荐文章于 2023-12-02 13:19:32 发布

贺今宵

最新推荐文章于 2023-12-02 13:19:32 发布

阅读量897

点赞数

分类专栏： canvas 文章标签：大数据

本文链接：https://blog.csdn.net/qq_51389137/article/details/125438726

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

                //旋转镜像

                ctx.setTransform(1, 0, 0, 1, 0, 0); //恢复坐标系
                ctx.translate(
                  location[i].left -
                    component.show.Position.Left.value +
                    location[i].width / 2,
                  location[i].top -
                    component.show.Position.Top.value +
                    location[i].height / 2
                );//以中心点为坐标原点旋转，即顶点的x值+宽度的一半
                ctx.rotate((location[i].rotate * Math.PI) / 180);//旋转角度
                ctx.translate(
                  -(
                    location[i].left -
                    component.show.Position.Left.value +
                    location[i].width / 2
                  ),
                  -(
                    location[i].top -
                    component.show.Position.Top.value +
                    location[i].height / 2
                  )
                );//以中心点为坐标原点旋转，即顶点的x值+宽度的一半整体的负数值
               //如果有翻转，分别是垂直和水平
                   if(location[i].rotateY===180){
                      //垂直镜像  （宽度+顶点x坐标*2，0）
                   ctx.translate(location[i].width+ (location[i].left - component.show.Position.Left.value)*2, 0);
                   ctx.scale(-1, 1);
                    //恢复旋转的角度与旋转同，角度为旋转时的2倍
                   ctx.translate(
                  location[i].left -
                    component.show.Position.Left.value +
                    location[i].width / 2,
                  location[i].top -
                    component.show.Position.Top.value +
                    location[i].height / 2
                );
                ctx.rotate(2*(location[i].rotate * Math.PI) / 180);
                ctx.translate(
                  -(
                    location[i].left -
                    component.show.Position.Left.value +
                    location[i].width / 2
                  ),
                  -(
                    location[i].top -
                    component.show.Position.Top.value +
                    location[i].height / 2
                  )
                );
                }
                console.log('location[i].rotateY',location[i].rotateY,location[i].rotate);
                if(location[i].rotateX===180){
                        //垂直镜像  （0，高度+顶点y坐标*2）
                   ctx.translate(0,location[i].height+ (location[i].top - component.show.Position.Top.value)*2);
                   ctx.scale(1, -1);
                    //恢复同旋转，角度2倍
                ctx.translate(
                  location[i].left -
                    component.show.Position.Left.value +
                    location[i].width / 2,
                  location[i].top -
                    component.show.Position.Top.value +
                    location[i].height / 2
                );
                ctx.rotate((2*location[i].rotate * Math.PI) / 180);
                ctx.translate(
                  -(
                    location[i].left -
                    component.show.Position.Left.value +
                    location[i].width / 2
                  ),
                  -(
                    location[i].top -
                    component.show.Position.Top.value +
                    location[i].height / 2
                  )
                );
                }
                ctx.drawImage(
                  img,
                  location[i].left - component.show.Position.Left.value,
                  location[i].top - component.show.Position.Top.value,
                  location[i].width,
                  location[i].height
                );