Class: HtmlImage
不同浏览器下效果差异较大, 不是很推荐使用
将Html片段当做图片使用的类, 例如:
js
let htmlNode = new Node('From', 200, 200, 150, 150);
let htmlImage = new jtopo.HtmlImage(`
<div xmlns="http://www.w3.org/1999/xhtml"
style="height:97%;background-color:#eeeeee; border:2px white solid;">
<center><h4 style="color:orange;margin:0px;">居中标题</h4></center>
<ul style="text-align:left;background-color:#65472f;font-size:14px;">
<li style="color:#e9d9bf"><i>斜体-颜色-E9D9BF</i></li>
<li style="color:white"><strong>加粗-白色</strong></li>
</ul>
<img src="./assets/img/laptop.png" width="40" height="30"/>
<div>`, htmlNode.width, htmlNode.height);
htmlImage.getCanvas().then(function(canvas){
htmlNode.setImage(canvas);
});
该例中 div的xmlns属性是必须的
Table of contents
Constructors
Properties
Methods
Constructors
constructor
new HtmlImage(html
, width
, height
, opacity?
)
Parameters
Name | Type | Default value | Description |
---|---|---|---|
html | any | undefined | html片段 |
width | any | undefined | 宽 |
height | any | undefined | 高 |
opacity | number | 1 | 透明度 |
Properties
canvas
canvas: HTMLCanvasElement
height
height: number
= 1
html
html: any
isHtmlImage
isHtmlImage: boolean
= true
opacity
opacity: number
= 1
svg
svg: any
width
width: number
= 1
Methods
getAttribute
getAttribute(name
): string
Parameters
Name | Type |
---|---|
name | any |
Returns
string
getCanvas
getCanvas(): Promise
<HTMLCanvasElement
>
获取canvas
Returns
Promise
<HTMLCanvasElement
>
setHtml
setHtml(html
): void
Parameters
Name | Type |
---|---|
html | any |
Returns
void
setSize
setSize(width
, height
): void
Parameters
Name | Type |
---|---|
width | any |
height | any |
Returns
void