八仙过海各显神通之IE8圆角,微信小程序分享图片的简易canvas工具类

By admin in 4858美高梅 on 2019年3月28日

哦……大家设计师强烈须求一定要圆角!圆角的气泡对话框,不要那种尖角的。那中间还遇上了个两难的标题,z-index不见效

在微信小程序中生成一王贺报以便用户能够分享到朋友圈的效果在重重微信小程序中都有,前几天享受1个融洽写的总结canvas工具类

如有须求请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

4858美高梅 1demo.jpg

IE连串浏览器的斥责就不一一细说了。
相比较折磨前端的是客户对IE8的不离不弃,以及傲娇美术工作对各个新特征的溺爱。
关于IE8及以下版本浏览器无法呈现圆角,各路大神也都有连锁的稿子介绍,然则智者见智,可完结性依然须要组合项目做验证。此篇小说算是作为团结办事中相遇的这些题材的四个消除方案总结汇总。

承上启下上一篇progress,slider才是顶梁柱微信官方提供的slider作用有限,十分小概满意音频播放所急需使用的全部意义,所以那边写了三个自定义slider组件满足工作效用费用中的要求。写的非常粗大糙,不足之处请指正!

单纯正是两种办法,一种是应用图片再定位拼接起来使用,太不难了现实就不详细的说了。另一种方法正是border来写了,即使怎么写都是尖角的,不过小编想尝试一下。纯手写写出设计师想要的圆角吧

怀有参数按顺序传,没有默许值的总得传,要是急需修改最后二个参数,全数参数都急需传。。。(js小白,不了然怎么化解)

下边将多数功力贴在凡间

消除方案1:pie.htc

pie.htc算是消除IE8圆角难题比较常用的插件。海外的工程师们不会安于现状,他们一连能使用一些手腕使IE浏览器也能匡助CSS3的有的属性。那几个都以可怜有含义的业务,并且能有助于技术文明的向上。
啧啧,起高了…如故回到核心上来。直接上代码吧。

改组件重庆大学提供以下功用① 、可自定义滑块,暗中认可为和合法一样的反动圆形二 、划出缓冲范围自动回滚叁 、渐变前景观

怎么样是圆角的?什么是尖角的?以下图片能够对照出来:

第③,叁个将rpx转成px的措施,canvas使用px作为单位,(小编这里UI使用750px宽做安排图,使用的时候将标注软件的px改成rpx便是我们必要的)那些艺术本人间接写在app.js里面,因为用到的地点重重,比如还有OSS
 onLaunch: function () { wx.getSystemInfo({ success: res => { //获取屏幕宽度,然后根据宽度图获取图片 this.globalData.screenWidth = res.screenWidth; this.globalData.pixelRatio = res.pixelRatio; this.globalData.factor = res.screenWidth / 750; }, }) }, globalData: { userInfo: null, factor: 0.5, screenWidth: 375, pixelRatio: 2 }, toPx: function  { //这里的 2 可以改成 动态的 pixelRatio //设成固定的是为了在不同设备生成的图片可以在同一级分辨率 return rpx * this.globalData.factor * 2; }
CSS:
.pieDiv {
            height: 200px;
            width: 300px;
            background-color: #5bc0de;
            -moz-border-radius:8px;
            -webkit-border-radius:8px;
            border-radius:8px;
            margin: 40px;
            behavior: url("css/PIE.htc");
        }

下边主要讲讲那多少个功用的贯彻用法和注意事项,其余职能请下载文末的demo查看

那种是尖角:

① 、绘制纯色背景

最开始并未写那个,可是安卓真机上急需因而加上了,这一个其实正是画三个矩形,记得宽高要抢先你必要绘制的宽高

/** * @author 赵勇 * @desc canvas 画纯色背景 (在iOS上不画默认白色,安卓上不画默认是透明色) * * @param ctx canvas上下文 * @param color 背景颜色 * @param width 背景宽 * @param height 背景高 * @param x 轴 坐标 * @param y 轴 坐标 * */function drawBackground(ctx, color = 'white', width = 1000, height = 3000, x = 0, y = 0) { ctx.rect(x, y, width, height) ctx.setFillStyle ctx.fill()}
html:
<div class="pieDiv"></div>

不驾驭怎么使用自定义组件的同校,可以查看自个儿的上一篇小说progress

4858美高梅 2

使用

八仙过海各显神通之IE8圆角,微信小程序分享图片的简易canvas工具类。倘使暗中认可值满意,也足以只传三个参数即:canvas的上下文

canvasUtil.drawBackground;

要修改颜色能够

canvasUtil.drawBackground(ctx, '#999999');
效果:

如图,能够使图层完毕圆角成效。

4858美高梅 3

image

假如不是图层而是图片呢,能还是不能够使图片达成圆角呢。测试是可以的。

4858美高梅 4

image

可是我们需求精通,全部的方式都不是文武兼备的,也会有它的局限性。

① 、完结滑块的点击滑动,首要利用下边七个办法

那种是圆角:

② 、绘制文字

以此是为了有利于设置字体,字号,同时重回了最终的x轴坐标,是为着适应有些须求拼接文字的要求(比如价格拼接单位,不过单位字号不等同)

/** * @author 赵勇 * @desc canvas 画文字 * * @param ctx canvas上下文 * @param text 需要绘制的文字文字 * @param x 轴 坐标 * @param y 轴 坐标 * @param size 字体大小 * @param align 字体对齐方式 * @param color 字体颜色 * @param baseline 字体基线对齐方式 * @param fontWeight 字体粗细 * * @return 绘制完的 x轴 坐标值 */function drawText(ctx, text, x, y, size = '18', align = 'left', color = '#333333', baseline = 'top', fontWeight = 'normal') { size = parseInt let font = `${fontWeight} ${size}px sans-serif`; ctx.font = font; ctx.setTextAlign; ctx.setFillStyle; ctx.setTextBaseline; ctx.fillText(text, x, y); let m = ctx.measureText("" + text) return m.width + x;}
亟待留意的点:

IE下那几个CSS3效能完毕是借助VML,由VML绘制圆角或是投影效果的容器成分,然后那些容器成分作为指标元素的后兄弟节点插入,假如目的元素position:absolute
或是
position:relative,则这几个css3-container成分将会安装与之相同的z-index值,在DOM
tree中,同级的成分总是后边的覆盖前面的,所以这么就兑现了覆盖,又制止了可能有别的因素正好插入个中。所以,难点来了,假使近日因素的position属性为static,也正是暗许属性,则z-index属性是未曾用的,无覆盖可言,所以此时IE浏览器下CSS3的渲染是不会成功的。要化解也很简短,设置指标成分position:relative或是设置祖先成分position:relative并赋予二个z-index值(不可为-1)。
htc文件路径须求时相对路径。
会给任何质量埋坑,影响其它属性的正常化使用,不过为了落到实处际效果益,是坑也要入。

bindtap='sliderTap'bindtouchstart='sliderStart' bindtouchmove='sliderChange'bindtouchend='sliderEnd' bindtouchcancel='sliderCancel'

4858美高梅 5

注意点:

size
转成整数是因为字号设置是用rpx转px的,会出现小数的情景,而在canvas里面。。。一一点都不小心就报错了ctx.measureText();能够衡量字符串的尺寸,但是不可能是数字、、、作者那边就踩坑了,所以转成字符串

缓解方案2:ie-css3.htc

其一剧本文件也是选取相比普遍的缓解IE上css3难题的方案。
动用方式同上:

在js文件少校那八个办法抛出,让使用该器件的页面能够监听到那一个办法

 

使用:

只传部分参数

canvasUtil.drawBreakText(ctx, "text", app.toPx, app.toPx;

有着参数都用上

 canvasUtil.drawBreakText(ctx, "text", app.toPx, app.toPx, app.toPx, app.toPx, app.toPx, 'left', '#999999', 'top', 'bold');
css:
.ieCss3Div {
            height: 100px;
            width: 100px;
            background-color: #5bc0de;
            -moz-border-radius:8px;
            -webkit-border-radius:8px;
            border-radius:8px;
            margin: 40px;
            behavior: url("css/ie-css3.htc");
        }

自定义组件触发事件时,须求采取 trigger伊芙nt
方法,钦点事件名、detail对象和事件选项:

尖角的法子网上一搜也是一大堆,个中有本人最喜爱的阮大神的点子,阮大神博文在此(可点击):

叁 、绘制换行文字

那个需求也好不简单常见了呢,那里将再次回到值改成最后的y坐标值,相信大家也是能清楚的呀

/** * @author 赵勇 * @desc canvas画文字带换行 单位 * * @param ctx canvas上下文 * @param text 需要绘制的文字文字 * @param x x轴 坐标值 * @param y y轴 坐标值 * @param lineHeight 行高 * @param maxW 文字最宽值 * @param align 文字对齐方式 * @param color 字体颜色 * @param baseline 字体基线对齐方式 * @param fontWeight 字体粗细 * * @return 最后一行的底部 y轴 坐标值 */function drawBreakText(ctx, text, x, y, size, lineHeight, maxW, align = 'left', color = '#333333', baseline = 'top', fontWeight = 'normal') { size = parseInt let font = `${fontWeight} ${size}px sans-serif`; ctx.font = font; ctx.setTextAlign; ctx.setFillStyle; ctx.setTextBaseline; let textArr = text.split; const count = textArr.length; let tempText = ""; let row = []; for (let i = 0; i < count; i++) { if (ctx.measureText.width < maxW) { tempText += textArr[i]; } else { I--; row.push; tempText = ""; } } row.push; let i = 0; for (i; i < row.length; i++) { ctx.fillText(row[i], x, y + i * lineHeight, maxW); } return y + i * lineHeight;}

现实贯彻逻辑就是循环全部字符,然后去判断长度,看的不是很理解的能够cue作者

html:

<div class=”ieCss3Div”></div>

以上五个方法都要使用triggerEvent 监听sliderStart: function  { if (!this.data.disabled) { let detail = e.changedTouches; let option = {}; this.triggerEvent('sliderStart', detail, option); }},

而圆角的四个思路是应用边框加上背景象使用

肆 、绘制图片,然则保持比例填充

本人想在小程序里面,唯有mode:aspectFill才是大家确实用的最多的呢!

/** * @author 赵勇 * @desc canvas 绘制图 mode:aspectFill 保持比例填充 * * @param ctx canvas上下文 * @param imagePath 图片url * @param sWidth 原图宽 * @param sHeight 原图高 * @param dx canvas x轴 坐标 * @param dy canvas y轴 坐标 * @param dWidth canvas 宽 * @param dHeight canvas 高 */function drawImageAspectFill(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight) { //canvas与图片宽高比 var wRatio = dWidth / sWidth; var hRatio = dHeight / sHeight; //裁剪图片中间部分 if (sWidth >= dWidth && sHeight >= dHeight || sWidth <= dWidth && sHeight <= dHeight) { if (wRatio > hRatio) { ctx.drawImage(imagePath, 0, (sHeight - dHeight / wRatio) / 2, sWidth, dHeight / wRatio, dx, dy, dWidth, dHeight); } else { ctx.drawImage(imagePath, (sWidth - dWidth / hRatio) / 2, 0, dWidth / hRatio, sHeight, dx, dy, dWidth, dHeight); } } //拉伸图片 else { if (sWidth <= dWidth) { ctx.drawImage(imagePath, 0, (sHeight - dHeight / wRatio) / 2, sWidth, dHeight / wRatio, dx, dy, dWidth, dHeight); } else { ctx.drawImage(imagePath, (sWidth - dWidth / hRatio) / 2, 0, dWidth / hRatio, sHeight, dx, dy, dWidth, dHeight); } }}

这几个现实看例子吗。。笔者无心写了

效果:

假若是图层,效果如下,是能实现图层圆角的。

4858美高梅 6

image

万一是图表的气象下:经测试在IE8浏览器下ie-css3无法使图片达成圆角效率

4858美高梅 7

image

二 、在这么些组件中把默许滑块的高低明确在[20,
40]rpx之间。有四个地点需求作出限制2.① 、css文件 设置滑块的上下限

html

⑤ 、绘制图片,不过保持比例填充,同时还要圆角

好像在安卓上会有bug。。。一脸窘迫。。。制图圆角的章程,网上海人民广播电视台湾大学,作者抄的,所以也就不做解释了

/** * @author 赵勇 * @desc canvas 绘制圆角视图 * * @param ctx canvas上下文 * @param x canvas x轴 坐标 * @param y canvas y轴 坐标 * @param w 宽 * @param h 高 * @param r 圆角半径 * @param fill 填充 true 边框 false */function drawRoundRect(ctx, x, y, w, h, r, fill = true) { //开始绘制 ctx.beginPath(); // 因为边缘描边存在锯齿,最好指定使用 transparent 填充 // 这里是使用 fill 还是 stroke都可以,二选一即可 if  { ctx.setFillStyle('transparent') } else { ctx.setStrokeStyle('transparent') } // 左上角 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5) // border-top ctx.lineTo(x + w - r, y) // 右上角 ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2) // border-right ctx.lineTo(x + w, y + h - r) // 右下角 ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5) // border-bottom ctx.lineTo(x + r, y + h) // 左下角 ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI) // border-left ctx.lineTo // 这里是使用 fill 还是 stroke都可以,二选一即可,但是需要与上面对应 if  { ctx.fill() } else { ctx.stroke() } ctx.closePath()}

末段调用绘制圆角和制图图片的方法

/** * @author 赵勇 * @desc canvas 绘制圆角图 mode:aspectFill 保持比例填充 * * @param ctx canvas上下文 * @param imagePath 图片url * @param sWidth 原图宽 * @param sHeight 原图高 * @param dx canvas x轴 坐标 * @param dy canvas y轴 坐标 * @param dWidth canvas 宽 * @param dHeight canvas 高 * @param radius 圆角半径 */function drawImageAspectFillWidthCorner(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight, radius = 0) { ctx.save(); drawRoundRect(ctx, dx, dy, dWidth, dHeight, radius); // 剪切 ctx.clip() drawImageAspectFill(ctx, imagePath, sWidth, sHeight, dx, dy, dWidth, dHeight); ctx.restore();}

此间供给小心的正是那多个点子的调用时机啦

 ctx.save(); ctx.clip() ctx.restore();
亟需留意的点:

1:同样是依靠VML,由VML绘制圆角或是投影效果,所以还索要一个z-index属性。z-index属性最佳设置得相比大,如2。
2:behavior须要绝对路径。
3:要求写到对应的HTML里面才能立见作用。
4:需求加上position:relative;属性。

max-width: 40rpx;max-height: 40rpx;min-width: 20rpx;min-height: 20rpx;
<view class='dialog u-tri'>
    aaaaaaaaaa

</view>
最后多个,下载图片。。。what?下载图片和canvas有何关系、、、当自家索要绘制很多图片时,当图片数量不定点时。。。笔者就须求她了
/** * @author 赵勇 * @desc 下载图片数组 * * @param images 图片url数组 * @param success 成功回调 * */function downloadImages(images, success, info = [], i = 0) { const wxGetImageInfo = utils.wxPromisify(wx.getImageInfo); wxGetImageInfo({ src: images[I] }).then(res => { info = [...info, res]; I++; if (i < images.length) { downloadImages(images, success, info, i); } else { success; } }).catch(err => { console.log}

杀鸡取蛋方案3:

使用带圆角的图形,图层能够一贯添加圆角图片,图片能够用定位将圆角图片覆盖到地方。
本来能用代码解决的大家尽量不要这么“高大上”的章程。
那样的不二法门会追加服务器压力,拖慢网页进度。

2.贰 、js文件 在attached方法中对滑块大小作出限制

web端把view标签修改为div标签即可

知识点

终极保存的时候,在安卓上边有bug,就是字体大小啦,颜色啦都难堪了。。。需求在draw的时候加个300皮秒左右的延时。。。。

 ctx.draw => { setTimeout => { //你的其他代码 }, 300) });

写了一个简便的demo,须要的就自取啦:GitHub微信小程序保存图片分享的 canvas
简易自用工具类

当然,欢迎star~~~~

消除方案4:

使用纯css实现圆角功用
实质上那种圆角框是靠一个个容器堆砌而成的,每一个器皿的上涨幅度分化,那么些上涨幅度是由margin外边距来贯彻的,如:margin:0
5px;正是反正两侧的内地距5像素,从上到下有5条线,其外边距分别为5px,3px,2px,1px,依次递减。因而依据这一个原理我们得以兑现简单的html结构和样式。

 let blockSize = this.data.blockSize; if (blockSize > 40) { this.setData({ blockSize: 40 }) } else if (blockSize < 20) { this.setData({ blockSize: 20 }) }

css

css:
#css2 {
            padding: 10px;
            background: #5bc0de;
            color: #fff;
            margin: 0;
        }

        .r_a, .r_b, .r_c, .r_d {
            background: #5bc0de;
            display: block; /*让em显示在不同的行*/
            height: 1px;
            font-size: 18px;
            overflow: hidden; /*防止溢出让em变高*/
        }

        .r_a {
            margin: 0 5px;
        }

        .r_b {
            margin: 0 3px;
        }

        .r_c {
            margin: 0 2px;
        }

        .r_d {
            margin: 0 1px;
            height: 2px;
        }

三 、还有贰个值得注意的地方是,在利用该器件的时候要安装slider距离显示屏左边的偏离,这么些距离填写您项目中的实际距离即可

.dialog{
  position: relative;
  display: inline-block;
  width: 250px;
  background-color: green;
  padding: 30px;
  z-index: 2;
}

.u-tri::before{
  position: absolute;
  left: -4px;
  top: 4px;
  content: '';
  width: 50px;
  height: 50px;
  border-style:solid;
  border-width:2px;
  border-color: red ;
  border-radius:6px;
  background-color: red;
  transform:rotate(45deg);
  z-index: -1;
}
html:
<div style="width: 400px;margin: 40px">
    <div class="top_r"><em class="r_a"></em><em class="r_b"></em><em class="r_c"></em><em class="r_d"></em></div>
    <p id="css2">
        当我听到那句“想带着你南下·感受四季的变化·。看着窗前的花·,静静发芽·长成了牵挂”时,我的心化了。我也想带着一朵温柔如花的她,走过风风雨雨山川河流,来到温润如水的江南,躲过世俗的嘈杂,与她一起感受四季的变化,看窗台上那朵花慢慢发芽,变成彼此的牵挂。
    </p>
    <div class="bottom_r"><em class="r_d"></em><em class="r_c"></em><em class="r_b"></em><em class="r_a"></em></div>
</div>
 slider-left='75'

此处的 z-index
有个须要留意的地方,父必须得设置 z-index。假如不安装,那么
u-tri
会直接丢掉

效果:

4858美高梅 8

image

4858美高梅 9

image

以此纯css完成圆角的机能能合营大约全数浏览器,不过唯有本身本人能收看毛边吗?

4858美高梅 10

image

上述是这次关于IE8圆角难点协调的消除集中,希望能帮到大家,欢迎指正和互补。

四 、该器件所用到的单位均为rpx

效果

五 、参数释义:width: slider和progress 长度strokeWidth: slider和progress
宽度radius: slider和progress圆角bufferColor: 缓冲条颜色percent:
缓冲条百分比backgroundColor: progress背景象activeColor:
slider前山水value: 当前值max: 最大值blockSrc:
图片滑块地址blockImageWidth: 图片滑块宽blockImageHeight:
图片滑块高blockSize: 默许滑块大小blockColor: 暗中同意滑块颜色isCustom:
是还是不是自定义滑块 自定义滑块必须安装isCustom为true

4858美高梅 11

六 、上面放一些该零件实例图像和文字

 

4858美高梅 12设置value

max4858美高梅 13安装滑块大小4858美高梅 14设置滑块颜色4858美高梅 154858美高梅 ,图形滑块

 

柒 、没有写时间组件,所以时间要本人加哦

真机预览和微信开发工具的同一,把背景颜色都调成一样的,调整下地点和尺寸即可解除设计师的怨念,

八 、下一篇小说audio是一个节奏播放实例

除此以外注意一下,小程序行使可以依照需求将px单位改成rpx单位。作者那边只做简单演示,小程序端最棒是使用rpx单位哈

下载地址: demo

4858美高梅 16

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有