pixi中实现dom跟随 canvas容器 缩放 旋转 位移。

一、通过pixi创建一个舞台后。

二、dom初始化到容器中，定位到一个x,y左边。

0,0点是pixi 创建的canvas的左上角。

三、核心代码

/* container 移动 */
        // containerX  变换后的container容器的中心点x
        // containerY  变换后的container容器的中心点y
        // tempX dom的初始x坐标
        // tempY dom的初始y坐标
        // Deg 180/π
        // x container容器初始的中心点x
        // y container容器初始的中心点y
        let containerX =( container.getGlobalPosition().x) ;
        let containerY =( container.getGlobalPosition().y);
        let tempX = ((dom.getAttribute("data-x")/pixiMaxWidth.value*currentWidth.value));
        let tempY = ((dom.getAttribute("data-y")/pixiMaxHeight.value*currentHeight.value));
        let Deg = 180/Math.PI;
        // 计算一个点 经过 deg角度后 的坐标点
        let point = geometric.pointRotate([tempX*_x ,tempY*_y], rotate*(Deg), [x*_x, y*_y]);

        // console.log(x,containerX)
        // console.log(point[0]*_x, point[0]*_y)
        // console.log(tempX ,tempY)
        // console.log(point)
        // console.log(_x)
        // console.log(x,y)
        // console.log(point[0] - tempX)

        $(dom).css({
            left:( point[0] + (containerX- x) + (currentWidth.value - currentWidth.value*_x)/2 )+ 'px' ,
            top:( point[1] + (containerY - y) + (currentHeight.value - currentHeight.value*_y)/2 )+ 'px',
            transformOrigin:'0% 0%',
            transform:`scale(${_x,_y}) rotate(${rotate*(Deg)}deg)`  // 360/旋转一圈得到的container.rotation
        })

四、效果