canvas动态设置高度
2019-03-15 18:16:34
微信公开课小程序热门讨论关于「canvas动态设置高度」的小程序开发问题
补充:当前Bug的表现(可附上截图)我在js中的data里设置height:650px这个是最大的高度,而在onshow中读取图片,设置文字,这些高度都是变化的,所以我用dynamic_height来指示实际也就是最后的canvas高度,而在有些
展开:当前Bug的表现我在js中的data里设置height:650px这个是最大的高度,而在onshow中读取图片,设置文字,这些高度都是变化的,所以我用dynamic_height来指示实际也就是最后的canvas高度,而在有些情况下,canvas的高度是650px而不是在onshow中动态设置的高度预期表现这个是正常的图片bug后的图片会比这个高,但是下面有一部分是空白我在onload中设置了这个canvas要显示什么文字,在onshow中用wxgetImageInfo获取了图片的高度,在success方法中,通过res来获取图片的高度,并得到整个图片的高度,最后用thissetdata设置高度提供一个最简复现Demo<!这里是wxml<canvascanvasid=shareCanvasstyle=width:400px;height:{{height}};<canvas这里是onshow函数,可以看到有dynamic_height=dynamic_height+const这种的语句,用来增加图片高度在onshow中我还用了fillrect来绘制一个大的矩形作为背景,其高度也是固定的onShow:function(){letself=thisconsolelog(thisdatastuffnamelength)wxgetImageInfo({src:selfdatasrc,success(res){constctx=wxcreateCanvasContext(shareCanvas)conststuffnamewidth=ctxmeasureText(selfdatastuffname)ctxsetFillStyle(FFFFFF)ctxfillRect(0,0,400,700)ctxsetTextBaseline(top)vardynamic_height=pic_name+17varstuffname=selfdatastuffnamevarchr=stuffnamesplit();vartemp=;varrow=[];ctxsetFontSize(33)ctxsetFillStyle(black)for(varb=0;b<rowlength;b++){ctxsetFontSize(33)ctxsetFillStyle(black)ctxfillText(row[b],20,pic_name+10+b*40);dynamic_height=dynamic_height+40}ctxsetFontSize(27)ctxsetFillStyle(black)if(selfdataqq!=null&&selfdataqq!=null&&selfdataqq!=){ctxsetFontSize(27)ctxsetFillStyle(black)ctxfillText(请联系QQ:+selfdataqq,20,dynamic_height)dynamic_height=dynamic_height+40}elseif(selfdataphone!=null&&selfdataphone!=null&&selfdataphone!=){ctxsetFontSize(27)ctxsetFillStyle(black)ctxfillText(请联系手机:+selfdataphone,20,dynamic_height)dynamic_height=dynamic_height+40}ctxsetFontSize(17)ctxsetFillStyle(gray)ctxfillText(selfdatatime+发布,20,dynamic_height3)dynamic_height=dynamic_height+25ctxmoveTo(20,dynamic_height)ctxlineTo(380,dynamic_height)ctxsetStrokeStyle(gray)ctxstroke()dynamic_height=dynamic_height+15ctxdrawImage(iconcodejpg,20,dynamic_height,100,100)dynamic_height+=115selfsetData({height:dynamic_height+px})ctxdraw(false,function(){3canvas画布转成图片wxcanvasToTempFilePath({canvasId:shareCanvas,quality:1,success(res){selfsetData({filePath:restempFilePath,})selfsave()}})})consolelog(selfdatafilePath)}})},即速小程序:selfsetData({height:dynamic_height+px},()={ctxdrawxxxxxxx})这样可以吗
更多有关「canvas动态设置高度」的讨论可以前往微信公开课小程序参与互动哦!
补充:当前Bug的表现(可附上截图)我在js中的data里设置height:650px这个是最大的高度,而在onshow中读取图片,设置文字,这些高度都是变化的,所以我用dynamic_height来指示实际也就是最后的canvas高度,而在有些
展开:当前Bug的表现我在js中的data里设置height:650px这个是最大的高度,而在onshow中读取图片,设置文字,这些高度都是变化的,所以我用dynamic_height来指示实际也就是最后的canvas高度,而在有些情况下,canvas的高度是650px而不是在onshow中动态设置的高度预期表现这个是正常的图片bug后的图片会比这个高,但是下面有一部分是空白我在onload中设置了这个canvas要显示什么文字,在onshow中用wxgetImageInfo获取了图片的高度,在success方法中,通过res来获取图片的高度,并得到整个图片的高度,最后用thissetdata设置高度提供一个最简复现Demo<!这里是wxml<canvascanvasid=shareCanvasstyle=width:400px;height:{{height}};<canvas这里是onshow函数,可以看到有dynamic_height=dynamic_height+const这种的语句,用来增加图片高度在onshow中我还用了fillrect来绘制一个大的矩形作为背景,其高度也是固定的onShow:function(){letself=thisconsolelog(thisdatastuffnamelength)wxgetImageInfo({src:selfdatasrc,success(res){constctx=wxcreateCanvasContext(shareCanvas)conststuffnamewidth=ctxmeasureText(selfdatastuffname)ctxsetFillStyle(FFFFFF)ctxfillRect(0,0,400,700)ctxsetTextBaseline(top)vardynamic_height=pic_name+17varstuffname=selfdatastuffnamevarchr=stuffnamesplit();vartemp=;varrow=[];ctxsetFontSize(33)ctxsetFillStyle(black)for(varb=0;b<rowlength;b++){ctxsetFontSize(33)ctxsetFillStyle(black)ctxfillText(row[b],20,pic_name+10+b*40);dynamic_height=dynamic_height+40}ctxsetFontSize(27)ctxsetFillStyle(black)if(selfdataqq!=null&&selfdataqq!=null&&selfdataqq!=){ctxsetFontSize(27)ctxsetFillStyle(black)ctxfillText(请联系QQ:+selfdataqq,20,dynamic_height)dynamic_height=dynamic_height+40}elseif(selfdataphone!=null&&selfdataphone!=null&&selfdataphone!=){ctxsetFontSize(27)ctxsetFillStyle(black)ctxfillText(请联系手机:+selfdataphone,20,dynamic_height)dynamic_height=dynamic_height+40}ctxsetFontSize(17)ctxsetFillStyle(gray)ctxfillText(selfdatatime+发布,20,dynamic_height3)dynamic_height=dynamic_height+25ctxmoveTo(20,dynamic_height)ctxlineTo(380,dynamic_height)ctxsetStrokeStyle(gray)ctxstroke()dynamic_height=dynamic_height+15ctxdrawImage(iconcodejpg,20,dynamic_height,100,100)dynamic_height+=115selfsetData({height:dynamic_height+px})ctxdraw(false,function(){3canvas画布转成图片wxcanvasToTempFilePath({canvasId:shareCanvas,quality:1,success(res){selfsetData({filePath:restempFilePath,})selfsave()}})})consolelog(selfdatafilePath)}})},即速小程序:selfsetData({height:dynamic_height+px},()={ctxdrawxxxxxxx})这样可以吗
更多有关「canvas动态设置高度」的讨论可以前往微信公开课小程序参与互动哦!
标签:微信公开课,小程序
「canvas动态设置高度」热门讨论订阅
方法1:微信扫描微信公开课小程序码即可订阅热门讨论「canvas动态设置高度」
方法2:微信搜索微信公开课小程序名称进入,即可订阅热门讨论「canvas动态设置高度」
方法3:微信网页访问即速商店,长按识别微信公开课小程序码即可订阅热门讨论「canvas动态设置高度」
微信公开课小程序热门讨论「canvas动态设置高度」由微信公开课原创摘录于微信小程序商店shop.jisuapp.cn,转载请注明出处。
微信公开课热门讨论「canvas动态设置高度」由微信公开课开发者向微信用户提供,并对本服务内容、数据资料及其运营行为等真实性、合法性及有效性承担全部责任。
微信公开课小程序
更新时间:2019-03-15 18:16:34
>
__methodCallerx27;ofundefined
>-404011cloudfunctionexecutionerror
>,请补充选择商家自营-预付卡销售-发行方类目,并在基础信息处申请该类目,通过
>:host在模拟器中显示无效
>:请在小程序服务页面上架正式(非测试)内容或商品后重新提交审核
>.net 微信小程序 上传图片
>'setTimeout'的问题
>‘三朵里熙SPA主题减压空间’为什么搜索关键词‘三朵里‘搜不到
>‘扫普通链接二维码打开小程序‘中设置为体验版,扫码打开是线上版本
>“cloudfunctions**indexjs”gitignore
>“NO ULINK DEVICE FOUND”是怎么回事
>“万马掌上校园”的类目审核
>“上线了”公司开发的微信小程序怎么样?
>“产品是否一定需要条形码”
>