- 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积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

