transform-origin: 180px 180px;
transform: scale(3, 3) translate(-40px,-40px);
还是我们上面的状态，ok，我们现在蓝色跟绿色的标记还是一一对应的，那我们看看现在的坐标情况
蓝色：左边：
x:0 y:0 ，右边：
x:160 y:160绿色：左边：
x:120 y:120 ，右边：
x:200 y:200我们分别运用公式算一下出来的坐标是怎么样的 （以下为经过坐标换算）
蓝色：左边：
x:120 y:120 ，右边：
x:160 y:160 绿色：左边：
x:160 y:160 ，右边：
x:200 y:200不难发现，我们其实就相差了与位移距离
translateX/translateY 的差值，所以，我们只需要减去位移的距离就可以完美的进行坐标转换啦测试公式
根据上面的公式，我们可以简单测试一下！这个公式到底能不能生效！！！
我们直接沿用上面的demo，测试一下如果元素进行了变化，我们鼠标点下的地方生成一个标记，位置是否显示正确。看起来很ok啊（手动滑稽）
const wrap = document.getElementById('wrap')
wrap.onmousedown = function (e) {
const downX = e.pageX - wrap.offsetLeft
const downY = e.pageY - wrap.offsetTop const scale = 3
const translateX = -40
const translateY = -40
const transformOriginX = 180
const transformOriginY = 180
const dot = document.getElementById('dot')
dot.style.left = (transformOriginX - downX) / scale * (scale - 1) + downX - translateX + 'px'
dot.style.top = (transformOriginY - downY) / scale * (scale - 1) + downY - translateY + 'px'
}
可能有人会问，为什么要减去这个
offsetLeft 跟
offsetTop 呢，因为我们上面反复强调，我们计算的是鼠标点击的坐标，而这个坐标还是相对于我们展示容器的坐标，所以我们要减去容器本身的偏移量才行。组件设计
既然demo啥的都已经测试了ok了，我们接下来就逐一分析一下这个组件应该咋设计好呢（目前仍为低配版，之后再进行优化完善）
1. 基本的画布构成
我们先简单分析一下这个构成吧，其实主要就是一个画布的容器，右边一个工具栏，仅此而已
