一、通过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
})
四、效果