原生HTML5自由变换工具实例

最新推荐文章于 2021-05-31 10:43:30 发布

chongfeng2994

最新推荐文章于 2021-05-31 10:43:30 发布

阅读量197

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3987720/blog/2962728

版权

自由变换工具类似于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

转载于:https://my.oschina.net/u/3987720/blog/2962728

关注