さらに
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

さらに

2018-10-01 11:19
    ここまで、できました。
    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上面に表示されます。これは覚えとくと良いかも。


    にほんブログ村 IT技術ブログ プログラム・プログラマーへ
    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。