自由变换工具类似于PS中Ctrl+T功能,实现图片的缩放、斜切、旋转和位移。本实例已兼容不同容器的自由变换:一种是canvas,另一种是div。
canvas容器格式:仅支持<img>标签,控制点的渲染由canvas完成。
<body>
<canvas id="stage" width="640" height="480">
<img />
</canvas>
</body>
div容器格式:兼容支持<img>标签和<div>标签,其中的<svg>用于控制点的渲染。
<body>
<div id="stage">
<img />
<div>大家好,我是自由变换工具</div>
<svg id="svg-tool"></svg>
</div>
</body>
(注)div作为容器实现自由变换,必须要有一个svg标签。
资源变换效果如下:
实例中已详细做了注释,详细源码可下载附件。
http://download.csdn.net/detail/zeping891103/9863744