feat: 支持图片旋转 #1
Open
feat: 支持图片旋转 #1
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Envl
commented
Jul 1, 2021
| x = 0, | ||
| y = 0, | ||
| zoom = 1, | ||
| rotate = 0, |
Envl
force-pushed
the
feat-rotate-image-css
branch
3 times, most recently
from
f0985f2 to
25d4f5f
Compare
Envl
commented
Jul 1, 2021
| const isRotateRight270 = direction === 'right' && rotate === 270; | ||
| const isRotateLeft0 = direction === 'left' && rotate === 0; | ||
|
|
||
| if (isRotateRight270 || isRotateLeft0) { |
| degree = 360 - (-degree % 360); | ||
| } | ||
|
|
||
| if (this.props.animationDisabled) { |
There was a problem hiding this comment.
现有代码其他地方就是这么做的，保持一致。
做的事是这样：
- 开启动画（css 加上 transition）
- 等动画播完后，关闭动画
- 再让按钮重获 focus，以响应键盘事件
- ESC、左右方向键
| this.setTimeout(() => this.requestMove(direction, event)); | ||
| return; | ||
| } | ||
| // Reset the zoom level & rotation on image move |
| let transitionStyle = {}; | ||
| let transitionStyle = { | ||
| transition: 'transform 0s', | ||
| }; | ||
|
|
There was a problem hiding this comment.
在 chromium 中，如果 transition 属性本来为空，临时加上的话，不会播放旋转动画。所以放入一个 placeholder。
- added 2 buttons with icons ( rotate left & rotate right) fix: 避免 0 --> 270 度旋转动画的产生 feat: demo 打印旋转后的角度 fix: typo & bind this & focus on button & aria label fix: typo & bind this & focus on button & aria label
Envl
force-pushed
the
feat-rotate-image-css
branch
from
25d4f5f to
142f37b
Compare
Envl
force-pushed
the
feat-rotate-image-css
branch
from
13872a8 to
af93468
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
rotate控制图片旋转 cssenableRotate，默认为trueonImageRotate图片旋转后，会将顺时针旋转角度作为参数执行回调0、90、180、270核心改动看下面链接那个 PR 就行，这边多出来的改动都是因为加上了旋转动画(因为实际体验发现没有旋转动画有时候看到突然的图片方向变动有些错愕，一下子识别不出来图片的朝向)
https://github.com/frontend-collective/react-image-lightbox/pull/438/files