View unanswered posts | View active topics It is currently 2020-08-09 9:54



Reply to topic  [ 3 posts ] 
 如何设置自定义图片显示文本超过长度后以省略号显示? 
Author Message
新手上路

Joined: 2017-11-27 9:04
Posts: 1
Post 如何设置自定义图片显示文本超过长度后以省略号显示?
twaver.Util.registerImage('component', {
w: 180,
h: 32,
v: [{
shape: 'rect',
r: 6,
line: {
width: 2
color: '#0089C1'
}
},
{
shape:'text',
text:'<%=getClient('text')%>'
font:'12px "Microsoft Yahei"' ,
translater:{x:80,y:16} }
]
});



var node=new Twaver.Node("bbbbb")
node.setImage('component')
node.setClient('text','ssssssssssssssssssssssssss') :cry:


2019-08-26 18:03
Profile
TWaver开发组
User avatar

Joined: 2019-04-23 11:02
Posts: 88
Post Re: 如何设置自定义图片显示文本超过长度后以省略号显示?
计算一下文字的长度仅供参考
Code:
        function computeText(fontSize, limitWidth, text) {
          let c = document.createElement('canvas');
          let ctx = c.getContext('2d');
          ctx.font = fontSize;
          let txt = text;
          let measureWidth = ctx.measureText(txt).width + 4;
          if (measureWidth > limitWidth) {
            let nowWidth = 0;
            let i = 0;
            for (i ; i < text.length; i++) {
              nowWidth += ctx.measureText(text.charAt(i)).width;
              if (nowWidth > limitWidth - 4) {
                break;
              }
            }
            txt = text.substring(0, i - 1) + '...';
          }
          return txt
        }

        node.setClient('text', computeText(fontSize,limitWidth,text));


2019-12-16 16:30
Profile
TWaver开发组
User avatar

Joined: 2019-04-23 11:02
Posts: 88
Post Re: 如何设置自定义图片显示文本超过长度后以省略号显示?
demo在附件


Attachments:
image_文字截取.html.zip [1.06 KiB]
Downloaded 62 times
2019-12-16 16:36
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 3 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron