we-plugin/we-cropper

即使页面disable true 裁剪框和图片一起还是会被手指拖动。

Open

#54 opened on Apr 30, 2018

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (2,100 stars) (453 forks)batch import
help wanted

Description

Description

[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚] [Description of the issue] 即使页面设置了dissable: true. 代码用的wepy教程里面的源码， 裁剪框和图片你一起在ios下还是会被拖拽

Environment

  • Platform: [开发者工具/iOS/Andriod/Web] v1.02.1804120
  • Platform version: [对应工具或者iOS或者Andriod的版本号] ios 10.3.2
  • Wechat version: [微信版本号] 6.6.3
  • we-cropper version: [在package.json里] 1.2.0
  • other version: [如果是插件问题，请列出问题插件的版本号]

Reproduce

[如何重现问题]

[How to reproduce the issue] 按照在wepy中使用we-cropper教程 源码复制

Observed Results

[实际表现] 裁剪框和图片一起被拖动 682945081896668678 605011315417184808 备注：黄色背景是修改了 canvas的背景色，证明被拖拽的不是页面和canvas [Observed Results]

Expected Results

[期望表现] 裁剪框不动，只有图片能被拖拽 [Expected Results]

Relevant Code / Logs

页面代码 ` .page { width: 100%; height: 100%; background: black; position: fixed; left: 0; top: 0; .button { position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0; background: #ae1424; color: white; } } <cropper :options="cropperOpt" @beforeImageLoad="bl"> <button @tap="handleLongPress" class='button'>选择操作

组件源码 ` /* .cropper{ position: relative; } */ <canvas class="cropper" disable-scroll="{{disable}}" @touchstart="ts" @touchmove="tm" @touchend="te" style="width:{{width}}px;height:{{height}}px;background-color: gold" @error="canvasError" canvas-id="cropper">

` // TODO(you): code or logs ohere to reproduce the problem

Contributor guide

Tech stack
javascript
Domain
frontendmobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic knowledge of WeChat mini program developmentUnderstanding of touch eventsFamiliarity with canvasExperience with we cropper
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the touch handling in we cropper, specifically how the `disable` option affects touch event propagation. The issue reports that even with `disable: true`, both the crop box and image move on iOS. Review the touch event handlers (`touchstart`, `touchmove`, `touchend`) in the we cropper source code and the wepy component to see if the `disable` flag is properly checked. Also check for any iOS specific behavior. Consider testing with a minimal reproduction using the provided code.