http://yoseisan.happy.nu/b012/zoomtest0.html
作ってみて一つ気づいたことがあるので、今後Fabric.jsを使いたいという方のためにメモ。
今回のこれを実現させるために、canvasをpng画像でサンドイッチしてます。
どういうことかというと、図形を描いてるcanvasの上面と背面にそれぞれ画像を配置してるということです。
背面がコレ
上面がこれ
で、わかりにくいですが、↑のパネルの内側は透明処理が施されてるので、図形canvasや背面が透けて見えると。
で、中の図形を縮小させた時に背面、ボルトの軸部分が表示されるようにしてます。
canvas.setBackgroundImage('画像ファイル名', canvas.renderAll.bind(canvas));
でCANVAS背面に
canvas.setOverlayImage('画像ファイル名', canvas.renderAll.bind(canvas));
でCANVAS上面に表示されます。これは覚えとくと良いかも。