公告列表
公告列表
收藏
回答

如何能实现通过slider来简单调节图片参数？

求助，如题想通过slider调节图片参数，不知道如何调（小白找不到相关参数无法直接调），因此想用障眼法，也就是自己在外部调节好图片参数，存为多张图，然后通过控制slider来显示不同图片，但是没有成功；又尝试将调节好参数的多张图重叠放置，调节相应层下的图片透明度来显示底层的图片，也没成功...呃，不知道怎么办了

想实现如图的调节，该怎么做呢；提供一下思路也行，先谢过~

（也许功能看起来没什么意义，但其实是一个些许实验性质的小程序课业，求助）

回答关注问题邀请回答
收藏

2 个回答

  • 辻贰贰
    辻贰贰
    2021-07-04
    /* 图片显示部分 */
<view class="dynamic-get-img">
  <block wx:if="{{cameraname=='sonycamera'}}">
    <block wx:if="{{hidden1}}">
      <image class="img" mode="widthFix" src="cloud://cloud1-2g5owshf7c7c0c47.636c-cloud1-2g5owshf7c7c0c47-1306322446/sony/ISO_50.jpg"></image>
    </block>
    <block wx:if="{{hidden2}}">
      <image class="img" mode="widthFix" src="cloud://cloud1-2g5owshf7c7c0c47.636c-cloud1-2g5owshf7c7c0c47-1306322446/sony/ISO_100.jpg"></image>
    </block>
    <block wx:if="{{hidden3}}">
      <image class="img" mode="widthFix" src="cloud://cloud1-2g5owshf7c7c0c47.636c-cloud1-2g5owshf7c7c0c47-1306322446/sony/ISO_6400.jpg"></image>
    </block>
  </block>
</view>
/* 滚动条部分 */
<block wx:if="{{cameraname=='sonycamera'}}">
    <view class="box">
      <view class="monitor">
        <text class="monitor-title" decode="{{true}}" space="{{true}}">&ensp;焦&ensp;&ensp;距</text>
        <view class="body-view">
          <slider bindchange="slider_focalD_change" 
          show-value 
          min="1" 
          max="3" 
          step="1" 
          backgroundColor="blue" 
          block-color="white" 
          activeColor="red"/>
        </view>
    </view>

    <view class="monitor">
      <text class="monitor-title" decode="{{true}}" space="{{true}}">&ensp;感光度</text>
      <view class="body-view">
          <slider bindchange="slider_ISO_change" 
          show-value 
          min="1" 
          max="3" 
          step="1" 
          backgroundColor="blue" 
          block-color="white" 
          activeColor="red"/>
        </view>
    </view>

    <view class="monitor">
      <text class="monitor-title" decode="{{true}}" space="{{true}}">&ensp;色&ensp;&ensp;温</text>
      <view class="body-view">
          <slider bindchange="slider_colorT_change" 
          show-value 
          min="1" 
          max="3" 
          step="1" 
          backgroundColor="blue" 
          block-color="white" 
          activeColor="red"/>
        </view>
    </view>
    </view>
  </block>
    2021-07-04
    有用
    回复
  • 卢霄霄
    卢霄霄
    2021-07-04

    css的效果处理和你列的这三个不能完全对应上

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

    2021-07-04
    有用
    回复 11
    • 辻贰贰
      辻贰贰
      2021-07-04
      谢谢。我大概也猜到是无法直接对应的，所以主要还是想用障眼法，调节slider到不同的值，动态渲染不同的图片。比如图中“感光度”我给了1、2、3三个值，同时准备了三张图，slider为1时显示第一张图，为2时显示第二张图，这样子的（但目前还没解决
      2021-07-04
      赞
      回复
    • 辻贰贰
      辻贰贰
      2021-07-04
      简单来说就是想简单地模拟相机的一些功能...
      2021-07-04
      赞
      回复
    • 卢霄霄
      卢霄霄
      2021-07-04回复辻贰贰
      或者 你也可以用canvas自己来实现效果，可以拿到每个像素点的颜色，然后手动处理下
      2021-07-04
      赞
      回复
    • 卢霄霄
      卢霄霄
      2021-07-04回复辻贰贰
      slider到某个值 你就换个图 也行。。
      2021-07-04
      赞
      回复
    • 辻贰贰
      辻贰贰
      2021-07-04回复卢霄霄
      嗯，但这样处理貌似涉及到算法了，难搞啊哈哈哈哈，不过还是能参考下的，谢谢
      2021-07-04
      赞
      回复
    查看更多(6)
请 登录 后发表内容
相关文档