首页 > 作文

详解JavaScript如何创建一个非自动播放的GIF网络组件

更新时间:2023-04-05 02:01:28 阅读: 评论:0

目录
车辆工程专业介绍一些很可爱的测试数据构建web组件逻辑结果

今天,我将向您展示如何创建一个允许您的用户决定是否要播放 gif 的 web 组件!让我们开始吧。

一些很可爱的测试数据

这里用的gif是小骆驼和猫的这种可爱互动:

哇,太可爱了!我可以看一天这个

构建 web 组件

对于这个 web 组件,我们需要一些东西:

画布(“缩略图”所在的位置)一张图片(实际的 gif)标有“gif”的标签一些造型

让我们这样做:

const noautoplaygiftemplate = document.createelement('template')noautoplaygiftemplate.innerhtml = `<style>.no-autoplay-gif {  --size: 30px;  cursor: pointer;  position: relative;}.no-autoplay-gif .gif-label {  border: 2px solid #000;  background-color: #fff;  border-radius: 100%;  width: var(--size);  height: var(--size);  text-align: center;  font: bold calc(var(--size) * 0.4)/var(--size) sans-rif;  position: absolute;  top: calc(50% - var(--size) / 2);  left: calc(50% - var(--size) / 2);}.no-autoplay-gif .hidden {  display: none;}</style><div class="no-autoplay-gif">  <canvas />  <span class="gif-label" aria-hidden="true">gif</span>  <img class="hidden"></div>

接下来,我们将创建一个派生自 htmlelement 的类。 此类稍后将包含播放/停止切换行为。

class noautoplaygif extends htmlelement {  constructor() {    super()    // 在此处添加设置  }  loadimage() {    // 在此处添加渲染  }  static get obrvedattributes() {    return ['src', 'alt'];  }  attributechangedcallback(name, oldval, newval) {    if (oldval !== newval || oldval === null) {      this.loadimage()    }  }}

这里还有一些样板:一个空的渲染函数,它将加载图像并显示缩略图,以及一个构造函数和一些特定于 web 组件的方法。

好的,这已经是很多代码了。让我解释。

loadimage函数不会自动调用,我们需要自己调用。该函数attributechangedcallback让我们定义当任何指定属性发生obrvedattributes变化时会发生什么。在这种情况下:加载图像并显示它。浏览器大致做的是这样的:

遇到 web 组件调用它的构造函数(调用constructor())将其属性一一设置为 dom 中的设置(因此,src="llama2017世界女排大奖赛.gif"调用.tattribute('src', 'llama.gif')attributechangedcallback对每个更改的属性执行

签入构造函数时,这些属性一开始是空的,稍后才会填充。如果我们需要一个或多个属性来实际进行渲染,那么如果我们 知道 这些属性不存在,那么调用该loadimage函数是没有意义的。所以我们不在构造函数中调用它,但只有在有可能存在属性时才调用它。**

为了完成样板化,让我们将这个类定义为我们的自定义 web 组件:

class noautoplaygif extends htmlelement {  // ...}window.customelements.define('no-autoplay-gif', noautoplaygif)

我们现在可以像这样使用这个组件:

<no-autoplay-gif   src="..."   alt="llama and cat" />

逻辑

有趣的来了。我们需要添加noautoplaygiftemplate作为组件的shadow dom。src这已经可以渲染 dom,但是如果没有andalt属性,我们仍然不能做很多事情。因此我们只从 shadow dom 中收集一些我们稍后需要的元素,并且已经附加了一个单击侦听器来切换启动/停止模式。

class noautoplaygif extends htmlelement {  constructor() {    super()    // 添加 shadow dom    this._shadowroot = this.attachshadow({ mode: 'open' })    // 从上面添加模板    this._shadowroot.appendchild(      noautoplaygiftemplate.content.clonenode(true)    )    // 我们稍后会需要这些    this.canvas = this._shadowroot.querylector('canvas')    this.img世界杯中国赛程 = this._shadow一知半解的意思root.querylector('img')    this.label = this._shadowroot.querylector('.gif-label')    this.container = this._shadowroot.querylector('.no-autoplay-gif')    // 使整个东西可点击    this._shadowroot.querylector('.no-autoplay-gif').addeventlistener('click', () => {      this.toggleimage()    })  }  // ...}

为了不遇到未定义的方法错误,我们还添加了这三个方法:

class noautoplaygif extends htmlelement {  // ...  toggleimage(force = undefined) {    this.img.classlist.toggle('hidden', force)    // we need to check for undefined values, as js does a distinction here.    // we cannot simply negate a given force value (i.e. hiding one thing and unhiding another)    // 震惊的近义词as an undefined value would actually toggle the img, but    // always hide the other two, becau !undefined == true    this.canvas.classlist.toggle('hidden', force !== undefined ? !force : undefined)    this.label.classlist.toggle('hidden', force !== undefined ? !force : undefined)  }  start() {    this.toggleimage(fal)  }  stop() {    this.toggleimage(true)  }  // ...}

start/stop 方法允许我们强制启动或强制停止 gif。理论上,我们现在可以这样做:

const gif = document.querylector('no-autoplay-gif')gif.start()gif.stop()gif.toggleimage()

最后,我们可以添加图片加载部分。让我们先做一些验证:

class noautoplaygif extends htmlelement {  // ...  loadimage() {    const src = this.getattribute('src')    const alt = this.getattribute('alt')    if (!src) {      console.warn('a source gif must be given')      return    }    if (!src.endswith('.gif')) {      console.warn('provided src is not a .gif')      return    }    // more stuff  }  // ...}

最后一步,我们可以加载图像,设置一些宽度和高度并使用画布:

class noautoplaygif extends htmlelement {  // ...  loadimage() {    // validation    this.img.onload = event => {      const width = event.currenttarget.width      const height = event.currenttarget.height      // t width and height of the entire thing      this.canvas.tattribute('width', width)      this.canvas.tattribute('height', height)      this.container.tattribute('style', `        width: ${width}px;        height: ${height}px;      `)      // "draws" the gif onto a canvas, i.e. the first      // frame, making it look like a thumbnail.      this.canvas.getcontext('2d').drawimage(this.img, 0, 0)    }    // trigger the loading    this.img.src = src    this.img.alt = alt  }  // ...}

我们完成了!

结果

演示地址:haiyong.site/gif

以上就是详解javascript如何创建一个非自动播放的gif网络组件的详细内容,更多关于javascript播放gif的资料请关注www.887551.com其它相关文章!

本文发布于:2023-04-05 02:01:26,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/50e930ce73a545d7c86e8ed3eb907d08.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:详解JavaScript如何创建一个非自动播放的GIF网络组件.doc

本文 PDF 下载地址:详解JavaScript如何创建一个非自动播放的GIF网络组件.pdf

标签:组件   函数   让我们   属性
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图