Skip to content

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

NameTypeDefault valueDescription
htmlanyundefinedhtml片段
widthanyundefined
heightanyundefined
opacitynumber1透明度

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

NameType
nameany

Returns

string


getCanvas

getCanvas(): Promise<HTMLCanvasElement>

获取canvas

Returns

Promise<HTMLCanvasElement>


setHtml

setHtml(html): void

Parameters

NameType
htmlany

Returns

void


setSize

setSize(width, height): void

Parameters

NameType
widthany
heightany

Returns

void