如何通过传递名称返回头像图标

我有一个要求，通过传递一个名称，它应该返回一个头像图标包含该名称中包含的单词的第一个字母。例如，如果我通过约翰亚伯拉罕它应该返回一个图标'JA'。我需要在sapui5控件中使用该图标。我对此没有任何想法。如何实现这一点？任何帮助表示赞赏。如何通过传递名称返回头像图标

我需要像这样的头像图标。你可以在这看到带字母V的图标。 avatar icon

谢谢你，

来源

2016-09-27 vijayalalitha

例子你需要'JB'或'JA'？ –

如果你想用jQuery生成图片。请检查'canvas' –

感谢您的答复。我在画布上没有一个好主意。我知道只有我们可以使用画布绘制任何类型的弧线和形状。你能详细告诉我如何使用画布来做到这一点，以及如何返回一个包含字母的图标？ – vijayalalitha

画布answeres在正确的轨道上，但在你的情况下，你需要一个数据链接，你可以指定你的控制src或icon财产。

以下示例中的generateAvatar函数将名称（字符串）转换为图像数据url（包含url中base64 gif的图像）。数据url可以分配给Buttons icon property或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

来源

2016-09-29 19:55:17 schnoedel

非常感谢你的工作。 – vijayalalitha

你能否给我提供一些信息，比如我们有没有方法将sapui5控件转换为dataURI格式，比如toDataURL。上面的工作很好，但我只是想知道。 – vijayalalitha

sapui5控件呈现为html。数据url只支持所有浏览器中的图片。所以简单的答案是*否*。我甚至会建议反对过度使用数据网址。使用html在UI5等html框架中呈现您的内容。如果提供的控件不适合您的需要，请构建自定义控件。 – schnoedel

查看演示在这里。

JS BIN

你可以阅读更多关于帆布here

来源

2016-09-27 11:50:34

感谢您的答复..它显示我想要什么。但问题是我如何能够使用它作为sap.m.Image或sap.ui.core.Icon的src，因为它们支持URL格式， sap.ui.core.URI？ – vijayalalitha

歧路@Sathvik雕代码，以满足您的要求：

console.clear() 
 
var CVS = document.createElement('canvas'), 
 
    ctx = CVS.getContext('2d'); 
 

 
CVS.width = 500; 
 
CVS.height = 500; 
 
document.body.appendChild(CVS); // Add canvas to DOM 
 

 
// Transform input text 
 
function transformText(text) { 
 
    return text 
 
    .split(' ') 
 
    .map((str) => str ? str[0].toUpperCase() : "") 
 
    .join('') 
 
} 
 

 
// GRAPHICS TO CANVAS ///// 
 
function sendToCanvas(ob) { 
 
    var img = new Image(); 
 
    img.onload = function() { 
 
     ctx.drawImage(img, 0, 0); 
 
     ctx.font = ob.fontWeight + ' ' + ob.fontSize + ' ' + ob.fontFamily; 
 
     ctx.textAlign = 'center'; 
 
     ctx.fillStyle = ob.color; 
 
     ctx.fillText(transformText(ob.text), CVS.width - 350, CVS.height/3); 
 
    }; 
 
    img.src = ob.image; 
 
    } 
 
    /////////////////////////// 
 

 
// DO IT! ///////////////// 
 

 
var cvsObj = { 
 
    image: "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=31228042", 
 
    text: "john doe", 
 
    fontFamily: "Arial", 
 
    fontWeight: "bold", 
 
    fontSize: "30px", 
 
    color: "rgba(0, 0, 0, 0.7)" 
 
}; 
 
sendToCanvas(cvsObj); 
 

 

 

 
document.getElementById('input').addEventListener('input', function() { 
 
    cvsObj.text = this.value; 
 
    sendToCanvas(cvsObj); 
 
}, false);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <meta charset=utf-8 /> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 

 
    Text: 
 
    <input id="input" type="text" value="John Doe"> 
 

 
</body> 
 

 
</html>

来源

2016-09-27 12:03:51 notgiorgi

你可以创建一个自定义UI5-控制。它支持数据绑定太:)

例如在JSBin：

var NameIcon = sap.ui.core.Control.extend("NameIcon", { // call the new Control type "NameIcon" and let it inherit 
            // from sap.ui.core.Control 

    // the Control API: 
    metadata : { 
     properties : {   // setter and getter are created behind the scenes, 
           // incl. data binding and type validation 
      "name" : "string", // in simple cases, just define the type 
      "size" : {type: "sap.ui.core.CSSSize", defaultValue: "40px"} 
           // you can also give a default value and more 
     } 
    }, 


    // the part creating the HTML: 
    renderer : function(oRm, oControl) { // static function, so use the given "oControl" instance 
             // instead of "this" in the renderer function 

     oRm.write("<div"); 
     oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important! 
     oRm.addStyle("width", oControl.getSize()); // write the Control property size; the Control has validated it 
                // to be a CSS size 
     oRm.addStyle("height", oControl.getSize()); 
     oRm.addStyle("border-radius", "50%"); 

     oRm.addStyle("text-align","center"); //Center text 
     oRm.addStyle("vertical-align","middle"); 
     oRm.addStyle("line-height", oControl.getSize()); 

     oRm.addStyle("font-family","Arial,Helvetica,sans-serif;") 
     oRm.addStyle("background-color", "steelblue"); 
     oRm.addStyle("color","white") 

     oRm.writeStyles(); 
     //oRm.addClass("sapMTitle");  // add a CSS class for styles common to all Control instances 
     oRm.writeClasses();    // this call writes the above class plus enables support 
             // for Square.addStyleClass(...) 

     oRm.write(">"); 
     oRm.writeEscaped(oControl.getInitials()); // write another Control property, with protection 
              // against cross-site-scripting 
     oRm.write("</div>"); 
    }, 
    getInitials:function(){ 
    var name = this.getName(); 
    if (!name) return ""; 
    var parts = name.split(" "); 
    var result = parts.map(function(p){return p.charAt(0).toLocaleUpperCase();}).join(""); 
    return result; 
    }, 
    // an event handler: 
    onclick : function(evt) { // is called when the Control's area is clicked - no event registration required 
     alert("Control clicked! Text of the Control is:\n" + this.getText()); 
    } 
});

来源

2016-09-27 12:21:21 schnoedel

谢谢你的答复。它返回我想要的东西，但你可以建议我如何使用它作为图标？像怎样才能将它作为sap.ui.core.Icon控件的src或sap.suite.ui.commons.process流控制或sap.m.Image？ – vijayalalitha

，因为它们支持URL格式，即sap.ui.core.URI？ – vijayalalitha

那么我可能会误解你的问题。这是一个自定义控件，可以在任何可以放置控件的地方使用。但是，您不能将其用作UI5控件的'sap-icon：//图标属性或图像源属性。但是，你可以扩展它，例如做更多的事情（可点击等），或者你可以使用像HorizontalLayout这样的东西把它与其他控件一起... – schnoedel

如何通过传递名称返回头像图标

回答

相关问题