图片放大后,显示不出的部分怎么看

来源:2-4 Canvas基础 使用滑杆交互

qq_杨小姐好萌啊_0

2019-09-17 18:37

老师,图片放大后,怎么实现上下左右拖动呢

写回答 关注

1回答

  • 爬动的瓜子
    2021-05-31 17:15:46

    写几个滑块控制不同方向超出部分大小,注意这里就不能再使用 drawImageByScale 了,因为这个函数是以中心为缩放de。

    html代码,max,value等值随意。

    <input type="range" name="range" id="vertical" min="0" max="3.0" step="0.01" value="1.5" class="slider left">

    js代码:

    let canvas = document.querySelector('#canvas'),
        vertical = document.querySelector('#vertical'),    // 右侧滑块
       slider = document.querySelector('#range');
       
       ...
       
    let scale = slider.value;
    let exceedInfo = { dx: 0, dy: 0, imageWidth: 0, imageHeight: 0 };   // 缩放后的图像信息
    ...
    image.onload = () => {
       vertical.onmousemove = () => {
         const { dx, dy } = exceedInfo;
         dy < 0 && drawExceedImage(vertical.value); // 超出的时候小于0
       }
    }
    
    // 绘制超出部分
    function drawExceedImage(y) {
       context.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
       const { dx, imageWidth, imageHeight } = exceedInfo;
       context.drawImage(image, dx, -y, imageWidth, imageHeight);
    }
                
    function drawImageByScale(scale) {
      ...
      if (dy < 0) {
        let max = Math.abs(dy) * 2;  // 滑块的最大值,dy是顶部超出,因为纵向只用了一个滑块,所以底部 + 顶部 = *2
        vertical.max = max;
        vertical.value = max / 2;  // 初始值是中间值,表示无translateY
      }
      ...
        return { dx, dy, imageWidth, imageHeight }
    }

    一开始是这样:

    http://img4.mukewang.com/60b4a74300016cb110940428.jpg

    这时候其实没有超出,可以隐藏右侧滑块,我没写。

    放大后这样(已经在垂直方向超出了):

    http://img1.mukewang.com/60b4a7170001f3a010530412.jpg

    拖到顶部是这样:

    http://img4.mukewang.com/60b4a6ed00019a6310810401.jpg

    拖到底部是这样:

    http://img1.mukewang.com/60b4a67300014daf10790400.jpg

    爬动的瓜子

    删漏了,在slider的mousemove事件中写入的exceedInfo: slider.onmousemove = () => { exceedInfo = drawImageByScale(slider.value); }

    2021-05-31 17:34:22

    共 2 条回复 >

Canvas玩转图像处理

canvas系列第三课,学会编写图像算法,一起玩转图像处理吧

60311 学习 · 124 问题

查看课程

相似问题