问使用css旋转fabric.js创建的canvas元素，画图的坐标和canvas的坐标对不上？

<template>
    <div class="operating_area">
        <!-- 主画布容器 -->
        <div class="main_Container" style="transform: rotate(45deg)">
            <div class="wrap_canvas">
                <canvas id="operate_Canvas" class="canvas-box"></canvas>
            </div>
        </div>
        <div class="main_Container">
            <div class="wrap_canvas">

            </div>
        </div>
    </div>
</template>
<script>
import lottie from "lottie-web";
import animationJsonData from '../assets/json/animation.json';
import { fabric } from "../static/fabric";
export default {
    name: "",
    data() {
        return {
            bottomUrl: require('../assets/home/91d51cbe1d6dd40828e30401b95ea24.png'),
            cvsMain: null, // 显示蒙层画板
            simpleBrush: null,
            eraser: null,
            brushSize: 50
        };
    },
    mounted() {
        this.getCanvasSize()
    },

    beforeDestroy() {
        this.clearedCondition()
    },
    watch: {},
    methods: {
        getCanvasSize(imgUrl = this.bottomUrl) {
            const fabricTemplateBox = document.querySelector(".main_Container");
            const clientWidth = fabricTemplateBox.clientWidth
            const clientHeight = fabricTemplateBox.clientHeight
            this.$nextTick(() => {
                this.cvsMain = new fabric.Canvas('operate_Canvas', {
                    width: clientWidth,
                    height: clientHeight,
                    selection: false // 不允许直接从画布框选
                });
                // 创建普通画笔
                this.simpleBrush = new fabric.PencilBrush(this.cvsMain);
                this.simpleBrush.color = 'rgba(91, 104, 234,.7)'
                this.simpleBrush.width = this.brushSize

                // 创建橡皮擦刷子
                this.eraser = new fabric.EraserBrush(this.cvsMain);
                this.eraser.width = this.brushSize
                this.cvsMain.freeDrawingBrush = this.simpleBrush;
                this.cvsMain.isDrawingMode = true

                this.setLayout()
            })
        },
        setLayout() {
            fabric.Image.fromURL(this.bottomUrl, (img) => {
                img.set({
                    selectable: false,
                    hoverCursor: 'auto',
                    erasable: false, // 不允许擦拭
                    id: 'backPack'
                });

                this.cvsMain.calcOffset()
                this.cvsMain.add(img)
                this.cvsMain.renderAll();
            }, { crossOrigin: 'anonymous' });
        },

    }
}
</script>
<style scoped lang="scss">
.operating_area {
    width: 1440px;
    // height: 810px;
    height: 890px;
    margin: 0 auto;
    position: relative;

    .storing_animations {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;

        .load-animation {
            width: 40%;
        }
    }

    .main_Container {
        width: 50%;
        float: left;
        height: 810px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        z-index: 3;
    }

    .secondary_container {
        width: 50%;
        position: absolute;
        right: 0;
        height: 810px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        z-index: 3;
    }

    .back_Container {
        width: 50%;
        position: absolute;
        right: 0;
        height: 810px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        z-index: 2;
    }

    .wrap_canvas {
        display: flex;
        justify-content: center;
        align-items: center;

        ::v-deep .canvas-container {
            display: block;
            position: relative;
        }


    }
}
</style>