- 博客(4)
- 收藏
- 关注
RSS订阅原创 canavs撤销功能实践
当我们在canvas上绘制图形的时候，有时候可能在某一步上画错，又或者对图像的位置进行反复的移动调整，觉得这个位置不合适 要返回上一个位置，这种情况下用户不可能删除当前这个图形重画，用户肯定是希望能撤销当前的步骤回到上一个步骤就可以，这就是所谓的撤销，那么说起来简单，但我们又应该如何去实现这样的功能呢？要做某一件事之前我们往往需要有一个可行性的思路，即可实施的方案。图形的绘制首先我们来想想，都知道canvas画布的原点是做左上角的，当用户画一个图形时会有哪些步骤， 一般会分为3步：第一步：开
2022-01-15 12:45:23
1613
原创 canvas实现剪切蒙层
canvas实现剪切蒙层。在某些特殊业务场景下我们需要多图像进行裁剪，或者创建蒙层框选出某个特定的区域，要实现这样的场景其实思路有很多，但是考虑到canvas的性能、实现复杂度的问题来讲，都有各自的不足之处。首先来看如下图需求场景。
2022-01-07 09:59:17
3881
原创 canvas拖拽功能实现
在默认状态下对图形的操作都是基于左上角为原点进行操作的，但在特定的场景下，我们希望改变原点的位置或者根据鼠标指针实时调整对图形的拖拽位置。这时就需要对原点进行相应的调整。例如我们要实现一个拖拽功能，根据鼠标点击图形上的任何一个位置对图形进行拖拽移动。 默认状态下，当我们点击图形并拖拽图形时会发现，在我们清空画布后对图形坐标进行重新绘制，发现鼠标指针的拖拽点往往始终偏移到图形的左上角原点位置为指针位置，那如何保持鼠标指针点击图形上的哪个位置就始终保持不变呢。那就涉及到鼠标按下到拖...
2022-01-07 09:48:48
2981
1
原创 canvas图形缩放功能
在实现缩放功能之前，我们无非需要考虑的是图形中心点的位置确定问题，在默认状态下不论是原点还是中心点均在画布的左上角位置，在不改变原点坐标的情况下对图形进行位移操作以实现缩放后确立中心点的位置。业务场景 当我们在画布中以鼠标的指针作为中心点对画布上的图形进行缩放时，在鼠标指针的中心点位置不变的情况下对图形进行缩放，以scale为缩放系数进行横纵坐标等比缩放，其中x,y为某个浮点数(浮点数越小缩放越平滑)，在缩放系数中存在一个缩放增量step的概念，所谓缩放增量是指每一个缩放较上一次增加了多...
2022-01-07 09:38:40
2932
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人