本周推荐 | 基于 canvas 实现 H5 丝滑看图体验

news2024/11/24 4:50:13

78f159d6570202a5fac0693db083a9e2.gif

推荐语：随着机器算力及性能的提升，基于原生Web体系的富交互体验也可以媲美原生，本文作者通过Canvas + Web手势从零实现了大图浏览的交互效果，并在体验上不输Native，是一次不错的技术尝试，欢迎阅读。

——大淘宝技术客户端开发工程师 楚奕

16d90d1359a4bbdd2cac6805a020c692.png

背景

最近进行汽车图库的建设，需要在 H5 页面中实现图片浏览，包括图片的基本交互（缩放、平移）、滑动切换、复杂手势（双击缩放、快扫切图）等。

盘点部门工具库，阿里集团的一个跨端工具库 jsbridge 提供了图片浏览的交互能力，但该能力是端侧的，交互界面独立（无法在详情页直接操作），且业务侧无法获知用户的交互情况（用户切换了图片，但是页面不感知）。最终实现上，使用了框架原生的 Swiper 组件支持业务层的左右滑动，使用 jsbridge 支持大图浏览，实现效果如下：

cad600e33e4ad0a4e403f87f23f5a373.gif

从实现效果来看，虽然功能上都具备了，但是交互不友好：用户进入图片详情页后还要再次点击图片才能浏览大图，切换图片还需要退回到详情页进行。

调研社区大图浏览方案，发现现有的方案要么接入难度大，要么改造成本高。为优化用户体验，拓展部门交付能力，决定基于 canvas 能力自行实现纯 H5 侧的大图浏览方案。

94468de6588fe493cd66ef023a61fdd3.png

基础 API

▐  图片绘制


canvas 图片浏览的关键 API 是drawImage，用到的方法签名为 drawImage(image, dx, dy, dWidth, dHeight)。该 API 通过指定图片的左上角坐标、图片宽高，控制容器内图片的可视区域。而图片宽高与缩放大小相关（图片等比例缩放），基本参数可进一步抽象为 imgX, imgY, imgScale。

drawImage地址：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

514c7443697355ab0cb9c73b2ee57a4a.png

技术目标是通过监听用户交互事件，动态计算这三个参数，改变图片的可视区域，达到图片浏览的目的。

▐  移动端事件


2007年，乔布斯在一块小玻璃屏上的轻轻一触，开启了数十载移动互联网的蓬勃发展。

085f9969028f654c81ef82d2d41a72e9.png

多年移动互联网的发展，用户对移动端的手势交互已经形成了如下心智：

cb6051a9967e7c8509580d6499c5d212.png

然而实际上，这些事件并不在移动端事件的标准规范里，标准的移动端事件有以下四种：

  1. touchstart：当在屏幕上按下手指时触发

  2. touchmove：当在屏幕上移动手指时触发

  3. touchend：当在屏幕上抬起手指时触发

  4. touchcancel：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的 touch 操作

标准规范：https://www.w3.org/TR/touch-events/

其它复杂事件都是三方库对基本事件的封装，其中的佼佼者当属 hammerjs，它成熟稳定，兼容鼠标/触摸事件，支持各种复杂手势。但功能强大的同时，也带来较大的体积。

hammerjs地址：https://github.com/hammerjs/hammer.js

由于图片浏览场景下手势需求简单明确，完全可以自行实现。在图片浏览中用到的复杂手势有：Swipe（滑动切图）、Tap（单击图片）、Drag（拖拽）、dblTap（双击放大图片）。拖拽和点击很简单，主要介绍下 Swipe 和 DblTap 的实现思路。

  • Swipe 事件


Swipe 是指手指在屏幕上快速地扫过，这里主要关注水平方向的快扫，以切换图片。快滑事件的实现，通过从按压到抬起的交互时间和滑动距离（水平向），计算滑动速度，判断是否属于快滑。

export interface IQuickCheck {
  startTime?: number; // 起始时间
  startX?: number; // 起始 x 点
}


const quickSlideCheckRef: {current: IQuickCheck} = {
  current: {}
};
export const quickSlideCheckFn = {
  tapStart: (startX) => {
    quickSlideCheckRef.current = {
      startX,
      startTime: performance.now(),
    }
  },
  /**
   * 双击结束校验
   * @param endX 结束点 x 坐标
   * @param toLeft 向左滑的回调函数
   * @param toRight 向右滑的回调函数
   * @returns 
   */
  tapEnd: (endX, toLeft, toRight) => {
    // 快滑判断
    const { startX, startTime } = quickSlideCheckRef.current;
    const endTime = performance.now();
    const speed = (endX - startX) / (endTime - startTime);


    // 如果图片比例大于宽度，不要移动
    if (Math.abs(speed) > 0.3) {
      if (speed > 0) toRight();
      else toLeft();
      return true;
    }


    return false;
  }
}

  • DblTap 事件

双击事件关键在于判断两次点击的间隔时间

export interface IDoubleTapCheck {
  firstTapStart?: number;
  firstTapEnd?: number;
  secondTapStart?: number;
}


const clickTime = 200;
const doubleTapCheckRef: {current: IDoubleTapCheck} = {
  current: {}
};
export const doubleClickCheckFn = {
  tapStart: () => {
    // 双击事件校验
    const now = performance.now();
    // 如果没有点击，则记录第一次点击
    if (!doubleTapCheckRef.current.firstTapStart) {
      doubleTapCheckRef.current.firstTapStart = now;
    } else { // 有第一次点击，判断这次点击是否与第一次点击连续
      if (now - doubleTapCheckRef.current.firstTapEnd < clickTime) {
        // 点击连续，记录为第二次点击
        doubleTapCheckRef.current.secondTapStart = now;
      } else {
        // 点击不连续，重置为第一次点击
        doubleTapCheckRef.current = {firstTapStart: now};
      }
    }
  },
  tapEnd: (callback = () => {}) => {
    const now = performance.now();
    let isDoubleTap = false;
    // 判断是第几次点击
    if (!doubleTapCheckRef.current.secondTapStart) { // 如果是第一次点击
      if (now - doubleTapCheckRef.current.firstTapStart < clickTime) { // 满足点击特征
        doubleTapCheckRef.current.firstTapEnd = now;
      } else {
        doubleTapCheckRef.current = {}; // 不满足点击特征，直接重置
      }
    } else { // 如果是第二次点击
      if (now - doubleTapCheckRef.current.secondTapStart < clickTime) { // 满足点击特征
        // 第二次点击命中，处理双击逻辑
        callback();
        isDoubleTap = true;
      } 
      // 恢复点击判断状态
      doubleTapCheckRef.current = {};
    }


    return isDoubleTap;
  }
}

▐  单指拖拽

单指拖拽是最基本的图片浏览能力，其实现也较为简单。只需根据拖拽前后 touch 点的坐标变化，更新图片的左上角坐标即可。

▐  双指缩放

双指缩放是移动端浏览图片的重要功能，其实现也相对复杂。

通过计算双指移动前后的距离，可以确定图片的缩放方向，具体的缩放策略，这里的缩放策略指图片的缩放中心和缩放尺度。社区中常见的解决方案是取两指中心（或者干脆就取其中一指）作为缩放中心点，缩放尺度则是固定的步进——这也是 H5 侧看图体验通常不够丝滑的关键原因：响应了，但没有完全响应。

而在成熟的看图实现中，双指初始接触的图片点始终跟随手指移动。当双指初始距离较小，而拉开很大时，图片放大尺度会更大，给人一种丝滑的浏览体验。为达到这种效果，就需要根据双指前后移动，确定图片角点坐标与缩放尺度。将双指移动前后的位置抽象出来如下：

47cc514333ec39413387e82c11ba071f.png

BC/B'C' 为缩放前后的双指位置，A/A‘ 为缩放前后图片左上角位置。其中，A/B/C/B‘/C' 坐标已知，如何求解 A’ 的坐标？这里有两个隐含条件：1. 移动前后，双指总是在一条直线上；2.移动前后，双指和角点围成的三角形是相似三角形。

一种思路是：

  1. 根据 AB，计算出 A'B' 的斜率；

  2. 根据 B‘坐标，确定 A'B' 的直线公式；

  3. 根据 BC/B'C’ 确定缩放尺度，进而算出 A‘B' 的距离。

  4. 有了直线公式和线段长度，能够得出 A’ 的两个可能坐标点，而 A‘ 一定在 B’ 的左上方，从而确定唯一解。

const handleZoom = (e: TouchEvent) => {
  const { touches: curTouches } = e;
  const { imgX, imgY, imgScale } = drawParamsRef.current;


  // 双指缩放图片时，图片不是按照固定的倍率缩放，而是两个锚点跟随移动
  // 应当根据双指位置，重新计算图片渲染位置
  const { clientX, clientY } = curTouches[0];
  const pos1 = getPositionInCanvas(clientX, clientY, canvasRef.current); // 第一指移动后
  const prePos1 = getPositionInCanvas(
    touchesRef.current[0].clientX,
    touchesRef.current[0].clientY,
    canvasRef.current
  ); // 第一指移动前
  // 计算缩放倍率
  const curDistance = getDistance(curTouches[0], curTouches[1]);
  const prevDistance = getDistance(touchesRef.current[0], touchesRef.current[1])
  const curScale = curDistance / prevDistance;
  // 计算左上角坐标
  const newImgXY = getNewImgXY(scalePos(prePos1), scalePos(pos1), {imgX, imgY}, curScale);


  // 缩放倍数不是相加关系，而是相乘（宽度计算应该在上一次的计算上递增）
  const newImgScale = imgScale * curScale;


  drawParamsRef.current = {
    imgScale: newImgScale,
    ...newImgXY,
  }


  // 更新缩放起始位置
  touchesRef.current = curTouches;
}

▐  双击缩放

厘清双指缩放的逻辑后，双击缩放就简单了。可以将双击缩放看作双指缩放的特殊情况（双指重合），给予固定的缩放尺度，即可复用双指缩放的逻辑。


▐  滑动切换

滑动切换图片主要通过左右边界与容器宽度的对比，判断是否需要切换图片。

const slideCheck = () => {
  let { imgScale, imgX } = drawParamsRef.current;
  const { width: canvasWidth } = canvasRef.current;
  let { width: imgWidth, height: imgHeight } = curImgRef.current;


  imgWidth = imgWidth * imgScale * devicePixelRatio;
  imgHeight = imgHeight * imgScale * devicePixelRatio;


  let doSlide = true;
  if (imgX > (canvasWidth * 2 / 5) && preImgRef.current) { // 右滑判断
    slideToRight();
  } else if (imgX < 0 && ((imgWidth + imgX) < (canvasWidth * 3 / 5)) && nextImgRef.current) { // 左滑判断
    slideToLeft();
  } else {
    doSlide = false;
  }


  return doSlide;
}

当用户在屏幕上快速扫过时，就算边界未超过阈值也应当切换图片。快扫的事件模拟已经在 “Swipe 事件”章节中有介绍。

000012b4ff00d189555903ff5ca24221.png

交互优化

▐  图片居中


图片的居中显示，是指图片垂直居中，宽度撑满容器。此时 imgX 设为 0，imgY 根据宽高比动态调整即可。

// 使图片保等宽居中
const initDrawParams = () => {
  const { width: imgWidth, height: imgHeight } = curImgRef.current;
  const { width: canvasWidth, height: canvasHeight } = canvasRef.current;


  // 初始绘制，使图片居中
  const imgScale = canvasWidth / imgWidth;
  const imgX = 0;
  const imgY = (canvasHeight - imgHeight * imgScale) / 2;
  drawParamsRef.current = {imgX, imgY, imgScale};
}

▐  滑动切换

当左右边界进入容器时，留白应当被前后图片填充，需要预加载当前图片前后的图片。

242d42d1657391106a55aa9c16e70713.png

/**
 * 绘图函数
 * @param isInit 参数为 true 时，将图片居中等宽绘制
 * @param isBouncing 参数为 ture 时，不做左右图片的滑出
 * @returns 
 */
const drawImg = (isInit = false, isBouncing = false) => {
  // ......
  // 如果拖到边界，需要绘制左右滑动的图片
  if (isZoomingRef.current || isBouncing) return; // 缩放/回动场景不加载左右图片
  if (imgX >= 0 && preImgRef.current) {
    // 向右滑，拉出部分左侧图片
    showSideImg(preImgRef, imgX - canvasWidth);
  } else if (imgX < 0 && imgX < canvasWidth - curImgWidth && nextImgRef.current){
    // 向左滑，拉出部分右侧图片
    showSideImg(nextImgRef, imgX + curImgWidth);
  }
}


/**
 * 拉出部分图片
 * @param imgRef 图片指针
 * @param imgX x 坐标
 */
const showSideImg = (imgRef, imgX) => {
  const { width: imgWidth, height: imgHeight } = imgRef.current;
  const { width: canvasWidth, height: canvasHeight } = canvasRef.current;
  const scale = canvasWidth / imgWidth / devicePixelRatio; // 计算缩放
  const imgY = (canvasHeight - imgHeight * scale * devicePixelRatio) / 2; // 计算 y 坐标
  ctxRef.current.drawImage(imgRef.current, imgX, imgY, canvasWidth, scale * imgHeight * devicePixelRatio);
}

▐  边界控制

边界控制主要避免左右两侧出现留白，或上下两侧中某侧超出屏幕，而另一侧存在留白等情况。

/**
 * 回弹场景
 * - 图片高度超过容器高度
 *   - 上边界大于零
 *   - 下边界小于底边
 * - 图片高度未超过容器高度
 *   - 上边界小于零
 *   - 下边界大于底边
 * - 图片宽度超过容器宽度
 *   - 左边界大于零
 *   - 右边界小于右边
 * - 图片宽度未超过容器宽度
 *   - 左边界小于零
 *   - 右边界超过右边
 * @param drawParams 待检查的绘图参数
 * @returns {imgX, imgY, imgScale} 检查后新的绘图参数 
 */
const boundaryCheck = (drawParams = null) => {
  const oldDrawParams = drawParams || drawParamsRef.current;
  let { imgScale, imgX, imgY } = oldDrawParams;
  const { width: canvasWidth, height: canvasHeight } = canvasRef.current;
  let { width: imgWidth, height: imgHeight } = curImgRef.current;


  imgWidth = imgWidth * imgScale * devicePixelRatio;
  imgHeight = imgHeight * imgScale * devicePixelRatio;


  // 垂直方向的回弹控制
  if (imgHeight >= canvasHeight) {
    if (imgY > 0) {
      imgY = 0;
    } else if (imgY + imgHeight < canvasHeight) {
      imgY = canvasHeight - imgHeight;
    }
  } else {
    if (imgY < 0) {
      imgY = 0;
    } else if (imgY + imgHeight > canvasHeight) {
      imgY = canvasHeight - imgHeight;
    }
  }


  // 水平方向的回弹控制
  if (imgWidth >= canvasWidth) {
    if (imgX > 0) {
      imgX = 0;
    } else if (imgX + imgWidth < canvasWidth) {
      imgX = canvasWidth - imgWidth;
    }
  } else {
    if (imgX < 0) {
      imgX = 0;
    } else if (imgX + imgWidth > canvasWidth) {
      imgX = canvasWidth - imgWidth;
    }
  }


  // 将图片居中展示
  if (canvasHeight >= imgHeight) {
    imgY = (canvasHeight - imgHeight) / 2;
  }


  return { imgY, imgX, imgScale };
}

▐  缩放控制

控制图片的缩放比例，图片的最小缩放比例也应当是宽度撑满容器，最大缩放比例下，应当使图片具有一定的信息量，实现上写死了某个经验值，后续优化中也可以根据原图尺寸动态计算。

▐  过渡动画


以上边界控制/缩放控制/图片居中/图片切换，会在交互完成后闪到限定位置，这种体验上比较糟糕。为交互位 -> 目标位的切换添加过渡。实现效果如下（左侧无过渡，右侧有过渡）：

e47166aeb20b36ae86bcd7a65373166a.gif

▐  提高图片清晰度

起初 canvas 宽高默认撑满容器，发现图片比较模糊。原因是 canvas 宽高决定了其中的像素值，未能充分利用高清的手机屏幕。在初始化时引入设备像素比 devicePixelRatio，将 canvas 宽高放大，再 scale 到容器尺寸，提高图片清晰度。

270e820ceb733815e606457ac9b20429.png

更改了容器空间的尺寸后，前面所有的交互中图片尺寸和定位计算都需要考虑这个 devicePixelRatio ，重新计算。

▐  PC 端的兼容

组件使用 canvas ，兼容性表现是比较好的。对 PC 端的兼容，主要是对不同事件触发的处理。如在缩放控制优化时，需要在缩放后进行缩放判断。移动端可以在 touchend 中执行，但 PC 端的 wheel 事件不存在类似 end 提示，就需要对其进行特殊处理。这里采用了定时器方案，保证滚动后的控制。

const mouseWheelWatcher = (e: WheelEvent & { wheelDelta: number }) => {
  mouseWheel(e);
  // 滚动结束后，进行缩放和边界判断
  if (wheelWatcherRef.current) {
    clearTimeout(wheelWatcherRef.current)
  }
  wheelWatcherRef.current = window.setTimeout(() => {
    rescaleImg({ clientX: e.clientX, clientY: e.clientY });
  }, 100)
}

最终实现的看图效果如下：

303267b4e76e3f7d73776a6e0dcae26c.gif

7c3b961ac8f31aeec729a7f39447ca4a.png

团队介绍

我们是阿里巴巴大淘宝技术汽车技术团队，是一支集研发、数据、算法一体的部门，利用互联网+数字化垂直整合汽车行业，打造消费者线上看车、买车、养车的极致体验。在这里，你会接触到新零售核心技术，交易、供应链、结算、阵地运营等。在这里，团队氛围融洽，业务发展迅猛，技术挑战多多，让你有商业思考，又有技术深度。阿里汽车高速发展的路上，期待您的加入！

¤ 拓展阅读 ¤

3DXR技术 | 终端技术 | 音视频技术

服务端技术 | 技术质量 | 数据算法

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/65642.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

家庭宽带相关知识及工具

家庭宽带相关知识及工具

1.FTTH、FTTR、FTTB FTTH&#xff0c;光纤到户&#xff0c;需要用到光猫&#xff0c;目前主流&#xff0c;最高到千兆(1G)&#xff0c;局域网内为网线(超五类、六类等)连接。 FTTR&#xff0c;光纤到房间&#xff0c;或者说是光纤到终端&#xff0c;全光网&#xff0c;最高到万…
阅读更多...
技术分享| 音视频与微信小程序互通实践

技术分享| 音视频与微信小程序互通实践

随着网络架构的变迁、媒体技术发展、音视频场景迭代&#xff0c;基于流媒体的技术也是推陈出新。WebRTC渐渐的成为了音视频互动场景的主流&#xff0c;而微信在6.5.21版本通过小程序开放了实时音视频能力&#xff0c;开发者们可以使用组件 < live-pusher > 实现基于 RTMP…
阅读更多...
计讯物联数字乡村解决方案全力助推三农信息化建设

计讯物联数字乡村解决方案全力助推三农信息化建设

​2020年&#xff0c;中央网信办等七部门联合印发《关于开展国家数字乡村试点工作的通知》。《通知》提出&#xff0c;做好数字乡村发展整体规划设计&#xff0c;统筹推进乡村的新型基础设施、数字经济、数字农业农村、农村科技创新、乡村数字治理、信息惠民服务等建设和发展。…
阅读更多...
类的加载过程（类的生命周期）详解

类的加载过程（类的生命周期）详解

类的加载过程&#xff08;类的生命周期&#xff09;详解 1. 概述 在Java中数据类型分为基本数据类型和引用数据类型。基本数据类型由虚拟机预先定义&#xff0c;引用数据类型则需要进行类的加载。 按照Java虚拟机规范&#xff0c;从class文件到加载到内存中的类&#xff0c;到…
阅读更多...
python全局和局部变量以及引用和装饰器

python全局和局部变量以及引用和装饰器

学习笔记 bilibili千峰python global关键字的添加 只有不可变的类型才需要添加global可变的类型不需要添加global不可变类型&#xff1a;当改变变量的值时候&#xff0c;地址发生了改变 类型&#xff1a;int&#xff0c;str&#xff0c;float&#xff0c;bool&#xff0c;tup…
阅读更多...
[Spring Boot 6]企业级开发

[Spring Boot 6]企业级开发

本节内容主要就几个常用的模块进行解读&#xff0c;在众多企业级开发中常常用得到。 例如邮件发送这一功能其实非常常见&#xff0c;在一般的网站设计中会有对注册邮件的激活功能&#xff0c;此时就需要用到这个功能了&#xff0c;一般来说激活邮件需要设置UUID 来进行验证&…
阅读更多...
【Python入门】Python入门必备思维导图，有方向的学习才是最实在的方法

【Python入门】Python入门必备思维导图，有方向的学习才是最实在的方法

前言 halo&#xff0c;包子们下午好 这篇文章主要是跟大家聊聊我们学习Python该怎么去学习 小编个人认为&#xff0c;学习Python一定要有一个好的学习方向&#xff0c;这样才知道自己该往什么方向去学习 今天小编主要给大家准备了我们学习Python的必备14张思维导图 赶快收藏起…
阅读更多...
【SSM整合】SpringMVC + Spring + Mybatis整合详细教程

【SSM整合】SpringMVC + Spring + Mybatis整合详细教程

前言 本文为 SpringMVC Spring Mybatis整合教程 相关详细介绍&#xff0c;从数据库数据准备、相关依赖包添加、创建项目基本结构和配置框架&#xff0c;到Mybatis层的编写、Spring层的编写、SpringMVC层的编写&#xff0c;再到前端页面编写等&#xff0c;最后进行运行与测试&…
阅读更多...
新生报到小程序毕业设计,新生报到管理系统设计与实现,毕设作品参考

新生报到小程序毕业设计,新生报到管理系统设计与实现,毕设作品参考

功能清单 【后台管理员功能】 广告管理&#xff1a;设置小程序首页轮播图广告和链接 留言列表&#xff1a;所有用户留言信息列表&#xff0c;支持删除 录入资讯&#xff1a;录入资讯标题、内容等信息 管理资讯&#xff1a;查看已录入资讯列表&#xff0c;支持删除和修改 学校…
阅读更多...
MySQL——表的约束

MySQL——表的约束

文章目录表的约束空属性默认值列描述zerofill主键&#x1f60a;自增长唯一键&#x1f60a;外键&#x1f60a;表的约束 真正约束字段的是数据类型&#xff0c;但是数据类型约束很单一&#xff0c;需要有一些额外的约束&#xff0c;更好的保证数据的合法性&#xff0c;从业务逻辑…
阅读更多...
前端给数字添加横线贯穿

前端给数字添加横线贯穿

效果 实现方法 1、给这个数字添加css属性&#xff1a;text-decoration: line-through; 2、给这个数字添加标签&#xff1a;del。如&#xff1a;<del>9999</del>。 text-decoration详解&#xff1a; text-decoration : none || underline || blink || overline |…
阅读更多...
使用RMI实现RPC

使用RMI实现RPC

1 RMI简介 RMI(Remote Method Invocation) 远程方法调用。 RMI是从JDK1.2推出的功能&#xff0c;它可以实现在一个Java应用中可以像调用本地方法一样调用另一个服务器中Java应用&#xff08;JVM&#xff09;中的内容。 RMI 是Java语言的远程调用&#xff0c;无法实现跨语言。…
阅读更多...
LVGL自定义组件__页面指示器

LVGL自定义组件__页面指示器

前言 LVGL对硬件的要求非常低&#xff0c;使用其自带的组件能够搭建出精美的界面&#xff0c;动效也很棒。但是如过移植到Linux平台下&#xff0c;开发稍微复杂的应用项目&#xff0c;那些组件就远远不够用了。为此需要自己自定义一些组件&#xff0c;以方便实用。 效果 为此…
阅读更多...
D-star Lite算法及相关思考

D-star Lite算法及相关思考

一、D-star Lite算法简介 1994年 Anthony Stentz在论文Optimal and Efficient Path Planning for Partially-known Environments中提出了D*算法 D * 算法采用逆向搜索&#xff0c;从目标点向起始点搜索规划&#xff0c;可以处理环境部分未知或全部未知以及动态障碍的一些情况。…
阅读更多...
神经网络入门（一）

神经网络入门（一）

神经网络入门&#xff08;一&#xff09; 文章目录神经网络入门&#xff08;一&#xff09;1. 神经元2. 网络结构3. 激活函数2.1 激活函数的作用与性质2.2 Sigmoid型函数2.3 Hard-Logistic函数和 Hard-Tanh函数2.4 ReLU函数2.5 常见的激活函数及其导数4. 前馈神经网络4.1 前馈神…
阅读更多...
DAY05-网页布局实战选择器CSS样式

DAY05-网页布局实战选择器CSS样式

文章目录网页布局实战一 CSS选择器a.基本选择器1.元素选择器2.类选择器3.id选择器b.复杂选择器c 伪选择器d 伪元素选择器二 CSS常用样式1.文本相关属性2.背景属性1)背景颜色2)背景图片3)背景平铺4)背景位置5)设置背景图片大小&#xff1a;6)background 背景复合属性案例1案例2案…
阅读更多...
Session的使用

Session的使用

Session的使用Session概述Session特性Session原理Session对象操作获取Session对象-----getSession获取SessionID------getId向Session对象存储/修改数据-----setAttribute获取数据------getAttribute删除数据----removeAttributeSession对象失效Session概述 Session对象&#…
阅读更多...
rust编程-rust所有权理解（chapter 4.2 引用实质是借用）

rust编程-rust所有权理解（chapter 4.2 引用实质是借用）

目录 2. 引用与借用 2.1 可变(mutable)引用 2.2 悬空&#xff08;dangling&#xff09;引用 2.3 引用的规则总结 2. 引用与借用 上一章节中提到&#xff0c;所有权在函数调用中的转移&#xff0c;函数返回必须同时返还所有权&#xff0c;才能使函数调用后能继续使用某个变量…
阅读更多...
[附源码]计算机毕业设计勤工助学管理系统Springboot程序

[附源码]计算机毕业设计勤工助学管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
jquery 登录-记住密码

jquery 登录-记住密码

jquery 登录-记住密码在登录时&#xff0c;添加记住密码功能&#xff1a;用的 localStorage 存储和获取登录信息 //存储 var username $("input[nameusername]").val(); var password $("input[namepassword]").val(); var validateCode $("inpu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023