签名-3.gif
横屏竖屏时签字区域相对较小，只要将其切到横屏那么体验将会好非常多了。查阅钉钉文档，发现并没有提供小程序切换横竖屏的api，那么只能我们自己做一个横屏效果了。我们可以通过rotate和translate样式，将签名版横置，再对其调整宽高。
// SignaturePad.jsx
const [full, setFull] = useState(false);
const toggleSize = () => {
setFull(!full);
};
return (
<View className="signature-pad-wrap">
<View className={`signature-pad ${full ? 'full-screen' : ''}`}>
{/* canvas */}
...
</View>
</View>
)
// SignaturePad.less
.signature-pad {
box-sizing: border-box;
width: 100%;
padding: 32px 32px 30px;
transform-origin: top left;
transition: transform 0.3s;
.canvas {
width: 686px;
height: 360px;
background: #fff;
}
&.full-screen {
width: 100vh;
height: 100vw;
transform: rotate(90deg) translate(0, -756px);
.canvas {
width: 1386px;
height: 630px;
}
}
}
签名-4.gif
然后，我们就可以看到如图效果，签名版是横置了，但是这个签名功能明显不对了。通过打印onTouchMove的event，我们发现x，y依然是(0, 0)，因为屏幕的xy轴不会变，但是我们旋转了整个签名版，所以展示出的canvas的xy轴是跟随着变形了，导致了上图情况。
既然canvas旋转会导致xy轴变化，那么我们可以换个角度，只改变canvas的宽高，将标题按钮区域进行transform是不是就可以了
// SignaturePad.jsx
<View className={`signature-pad ${full ? 'full-screen' : ''}`}>
<View className="signature-top">
<View className="title">签名板</View>
{/* 一系列按钮 */}
</View>
</View>
<Canvas
id="signature"
canvasId="signature"
className="canvas"
...
/>
</View>
// SignaturePad.less
.signature-pad {
.signature-top {
transform-origin: top left;
transition: transform 0.3s;
}
.canvas {
width: 686px;
height: 360px;
overflow: hidden;
background: #fff;
}
&.full-screen {
.signature-top {
position: absolute;
width: calc(100vh - 64px);
transform: translate(686px, 0) rotate(90deg);
}
.canvas {
width: 630px;
height: 1386px;
}
}
}
