账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    libgif库的使用
    54
    0
    使用libgif库操作动图的播放和暂停时,canvas为什么和父盒子之间有间隙?这个间隙可以去掉吗?让canvas和父盒子贴在一起,另外就是canvas本身还不能设置边框,现在我想设置canvas的边框和边框样式,有什么方法可以解决吗?前端菜鸟跪求大佬指导!!!下面附上代码:<template> <div class="SuperGifComponents"> <div class="imgbox"> <img id="example1" :src="imgUrl" rel:auto_play="0" :rel:animated_src="imgUrlGIF" rel:rubbable="0" width="467" height="375" /> </div> <div class="Buttonbox"> <div v-for="(item, index) in tabrooms" :key="index" class="itembox" @click="tabClickfun(item, index)" > {{ item }} </div> </div> </div></template><script>import SuperGif from "libgif";export default { name: "SuperGifComponents", data() { return { tabrooms: [ "Pause", "Play", "Restart", "Step forward", "Step back", "测试", ], imgUrl: require("@/assets/img/20190301133716_13666.gif"), // imgUrlGIF: require("@/assets/img/20190301133716_13666.gif"), sup1: null, }; }, async mounted() { try { this.InitSuperGif(); } catch (e) { console.error("程序错误", e); } }, methods: { InitSuperGif() { // 通过异步函数,获取gif文件 var sup1 = new SuperGif({ gif: document.getElementById("example1"), // 进度条配置 progressbar_foreground_color: "#9254de", progressbar_background_color: "#ebeef5", progressbar_height: 0, // 禁用循环 // loop_mode: ss, }); sup1.load(); this.sup1 = sup1; }, tabClickfun(item, index) { // ['Pause', 'Play', 'Restart', 'Step forward', 'Step back'] if (item === "Pause") { this.sup1.pause(); } else if (item === "Play") { this.sup1.play(); } else if (item === "Restart") { this.sup1.move_to(0); } else if (item === "Step forward") { this.sup1.move_relative(1); } else if (item === "Step back") { this.sup1.move_relative(-1); } else if (item === "测试") { } }, },};</script><style lang='scss' scoped>.SuperGifComponents { width: 60%; .imgbox { width: 60%; border: 10px solid rgb(228, 8, 8); padding: 0; } .Buttonbox { display: flex; flex-flow: row nowrap; margin: 30px; .itembox { // width: 86px; padding: 0 15px; height: 32px; line-height: 32px; text-align: center; white-space: nowrap; cursor: pointer; background: coral; margin-right: 10px; color: #fff; &:hover { background: rgb(219, 148, 122); } } }}</style>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • O桂果O 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部