我有一个要求,通过传递名称,它应该返回头像
图标,其中包含该名称中包含的单词的第一个字母。例如:如果我通过 John Abraham,它应该返回一个带有“JA”的图标。
我需要在 SAPUI5 控件中使用该图标。我对此没有任何想法。如何实施?任何帮助表示赞赏。
画布答案处于正确的轨道上,但在您的情况下,您需要一个可以分配给控件的数据 urlsrc
or icon
财产。
The generateAvatar
以下示例中的函数将名称(字符串)转换为图像数据 url(在 url 中包含作为 base64 gif 的图像)。数据 url 可以分配给按钮图标属性或 UI5 控件上的任何其他图像 url 属性。您甚至可以将其用作具有数据绑定的格式化程序函数,如下例所示。
var model = new sap.ui.model.json.JSONModel({
name: "John Doe"
});
new sap.m.Input({value:"{/name}", valueLiveUpdate:true}).setModel(model).placeAt("body");
new sap.m.Button({
icon:{path: "/name", formatter: generateAvatar},
text:"Hello"
}).setModel(model).placeAt("body");
function generateAvatar(name){
var initials = name.split(' ').map(function(str) { return str ? str[0].toUpperCase() : "";}).join('');
var canvas = document.createElement('canvas');
var radius = 30;
var margin = 5;
canvas.width = radius*2+margin*2;
canvas.height = radius*2+margin*2;
// Get the drawing context
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(radius+margin,radius+margin,radius, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = 'grey';
ctx.fill();
ctx.fillStyle = "white";
ctx.font = "bold 30px Arial";
ctx.textAlign = 'center';
ctx.fillText(initials, radius+5,radius*4/3+margin);
return canvas.toDataURL();
//The canvas will never be added to the document.
}
示例JSBin
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)