2D绘图

render2d 是一个Canvas二维渲染的命名空间，里面包含了Canvas2D图形的渲染引擎、图形绘制及管理、图形（包含文字）动画管理、事件管理等。主要用于通过创建2D图形给三维场景中创建纹理材质。

做为2d绘图渲染材质使用

通过 createRender2dTexture 创建 2d绘图渲染材质，通过texture获取材质。

let image = await vjmap3d.loadImage(env.assetsPath + "image/imgbg2.png");
let elements = [];
// 增加image做为底图
elements.push(new vjmap3d.render2d.Image({
    style: {
        x: 0,
        y: 0,
        image: image,
        width: 270, // 像素宽，这里是图片像素宽高定的
        height: 250 // 像素高，这里是图片像素宽高定的
    }
}))
// 增加文本
elements.push(new vjmap3d.render2d.Text({
    style: {
        x: 138,
        y: 100,
        text: "VJMAP",
        fill: "#0ff",
        font: '50px Arial',
        verticalAlign: "middle",
        align: "center",
    }
}))
// 创建2d渲染材质
let renderTexture = vjmap3d.createRender2dTexture({
    autoCanvasSize: false, // 是否根据绘制的内容计算渲染的大小
    sharedCanvas: true, // 是否为了提高效率共享一个canvas（仅在 autoCanvasSize:true 且未设 canvasWidth 时生效，此处不起作用）
    canvasWidth: 270, // 像素宽，这里是根据底图的像素宽高定的
    canvasHeight: 250, // 像素高，这里是根据底图的像素宽高定的
    elements: elements,
});
let geoW = 2, geoH = 2;
let geom = new THREE.PlaneGeometry(geoW, geoH);
let mat = new THREE.MeshStandardMaterial({
    map: renderTexture.texture() // 获取材质对象
})
let mesh = new THREE.Mesh(geom, mat);
mesh.position.set(0, 1, 0);
app.scene.add(mesh);

通过canvas使用

可直接创建一个canvas，在canvas上面进行绘图。把此canvas做为Marker2D、Marker3D、Popup2D的div元素使用。

注意：一个元素只能属于一个 Group——group.add(el) 会先把它从原来的 Group 中移出。下例若复用上面已交给 createRender2dTexture 的 elements，它们会被移出纹理的 Group（纹理内容随之丢失）；两处都要显示时请分别创建元素。

let canvas = document.createElement("canvas");
canvas.width = 270;
canvas.height = 250;
let render = vjmap3d.render2d.init(canvas);
let group = new vjmap3d.render2d.Group();
render.add(group);
for(let n = 0; n < elements.length; n++) {
    group.add(elements[n])
}
let marker = new vjmap3d.Marker2D({
    element: canvas,
    anchor: "bottom"
})
marker.setPosition(-5, 0, 3);
marker.addTo(app);

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
    },
    control: { leftButtonPan: true } // 设置为左键用于平移 (同时右键将用于旋转) 和地图2d使用习惯一样
})
let image = await vjmap3d.loadImage(env.assetsPath + "image/imgbg2.png");
let elements = [];
// 增加image做为底图
elements.push(new vjmap3d.render2d.Image({
    style: {
        x: 0,
        y: 0,
        image: image,
        width: 270, // 像素宽，这里是图片像素宽高定的
        height: 250 // 像素高，这里是图片像素宽高定的
    }
}))
elements.push(new vjmap3d.render2d.Text({
    style: {
        x: 138,
        y: 100,
        text: "VJMAP",
        fill: "#0ff",
        font: '50px Arial',
        verticalAlign: "middle",
        align: "center",
    }
}))
// 做为2d绘图渲染材质使用
let renderTexture = vjmap3d.createRender2dTexture({
    autoCanvasSize: false, // 是否根据绘制的内容计算渲染的大小
    sharedCanvas: true, // 是否为了提高效率共享一个canvas（仅在 autoCanvasSize:true 且未设 canvasWidth 时生效，此处不起作用）
    canvasWidth: 270, // 像素宽，这里是根据底图的像素宽高定的
    canvasHeight: 250, // 像素高，这里是根据底图的像素宽高定的
    elements: elements,
});
let geoW = 2, geoH = 2;
let geom = new THREE.PlaneGeometry(geoW, geoH);
let mat = new THREE.MeshStandardMaterial({
    map: renderTexture.texture()
})
let mesh = new THREE.Mesh(geom, mat);
mesh.position.set(0, 1, 0);
app.scene.add(mesh);
// 通过`canvas`使用（注意：下面 group.add 会把 elements 从上面纹理的 Group 中移走——一个元素只能属于一个 Group，实际两处都用请分别创建元素）
let canvas = document.createElement("canvas");
canvas.width = 270;
canvas.height = 250;
let render = vjmap3d.render2d.init(canvas);
let group = new vjmap3d.render2d.Group();
render.add(group);
for(let n = 0; n < elements.length; n++) {
    group.add(elements[n])
}
let marker = new vjmap3d.Marker2D({
    element: canvas,
    anchor: "bottom"
})
marker.setPosition(-5, 0, 3);
marker.addTo(app);

基本用法

以创建圆为例, 建了一个圆心在 [100, 200] 位置，半径为 10 像素的圆:

let el = new render2d.Circle({
    shape: {
        cx: 100,
        cy: 200,
        r: 10
    },
    style: {
        fill: 'none',
        stroke: '#F00'
    }
});

修改图形元素属性

使用 元素的 attr(key, value) 的形式修改，如

let circle = new render2d.Circle({
    shape: {
        cx: 100,
        cy: 200,
        r: 10
    }
});
circle.attr('shape', {
    r: 50 // 只更新 半径为50。cx、cy 将保持不变。
});

图形、组添加

//添加分组
var group = new render2d.Group();
//添加图形
var rect = new render2d.Rect({
    shape:{
        x:0,
        y:0,
        width:100,
        height:100
    }
});
group.add(rect)

支持图形

render2d 封装了常用的图形，可以直接通过new render2d.xxx({})调用；并且开放了自定义图形方法，通过 render2d.Path.extend 拓展自己需要的图形（注意大写 Path；小写的 render2d.path 是 SVG 路径工具模块）。

• Arc 实心圆、半圆
• BezierCurve 贝塞尔曲线
• Circle 实心圆、圆环
• Image图片
• Isogon正多边形
• Line直线
• Polygon多边形区域
• Polyline多折线
• Rect矩形
• Sector扇形、空心扇形
• Text文字
• Ellipse椭圆
• Isogon等角多边形
• Rose玫瑰状
• Star星星状
• Droplet水滴状
• Heart心状
• Ring圆环
• Trochoid内外旋轮曲线

自定义图形

通过继承自path，实现自定义图形的绘制

var triangleSelf = render2d.Path.extend({
    type: 'triangleSelf',
    shape: {
        x: 0,
        y: 0,
        width: 0,
        height: 0
    },
    buildPath: function (ctx, shape) {
        var x = shape.x;
        var y = shape.y;
        var height = shape.height;
        var width = shape.width;
        ctx.moveTo(x,y);
        ctx.lineTo(x+width/2,y+height);
        ctx.lineTo(x-width/2,y+height);
        ctx.closePath();
    }
})
//使用
var sf = new triangleSelf({
    shape: {
        x: 200,
        y: 0,
        width: 100,
        height: 100
    }
})

事件

通过el.on()绑定事件，el.off()取消绑定事件；group也可绑定事件，触发分组内具体对象才会触发

• 支持事件

'click'、 'dblclick'、 'mousedown'、 'mouseup'、 'mousemove'、 'mouseover'、 'mouseout'、 'mousewheel'、 'contextmenu'，以及拖拽族 'drag'、 'dragstart'、 'dragend'、 'dragenter'、 'dragleave'、 'dragover'、 'drop'（被拖动的元素需设 draggable: true）

动画

动画主要分成两种animate和animateTo；animate可以监测动画执行，可以在during中控制其他相关联动和一些处理，并可以对某些属性设定循环

animateTo

el.animateTo(target, cfg)

cfg 为 ElementAnimateConfig 配置对象：

注意：animateTo 第二参是配置对象（{duration, delay, easing, done, ...}），不是旧版的位置参数 (target, time, delay, easing, callback)。

let el = new render2d.Circle({
    shape: {
        cx: 100,
        cy: 200,
        r: 10
    },
    style: {
        fill: 'none',
        stroke: '#F00'
    }
});
el.animateTo({
    shape: {
        r: 50 // shape 的键须是该图形已有的键（Circle 为 cx/cy/r），写 width 对圆无效
    },
    style: {
        fill: 'red'
    },
    position: [10, 10]
}, {
    duration: 100,
    delay: 100,
    easing: 'cubicOut',
    done: function () {
        // done
    }
});

animate

el.animate('style', false)
.when(1000, {x: 10})
.delay(100)
.done(function () {
        // Animation done
})
.during(function(){
    
})
.start()

对象的销毁

离开页面或者组件不使用时及时销毁，节约内存开销

复制代码

let render = vjmap3d.render2d.init(canvas);
// 
render.dispose()

API文档

render2d.init(dom, opts)

得到一个 render2d 的实例。

参数

render2d.Animatable.animate(path, loop)

创建一个动画对象。动画不会立即开始，如需立即开始，需调用 render2d.Animator.start

参数

例子

el.animate('style', false)
    .when(1000, {x: 10})
    .done(function () {
         // Animation done
    })
    .start()

render2d.Animatable.animateTo

为属性设置动画。

el.animateTo(target, cfg)

参数

例子

// Animate position
el.animateTo({
    position: [10, 10]
}, {
    done: function () {
        // done
    }
});

// Animate shape, style and position in 100ms, delayed 100ms,
// with cubicOut easing（以 Circle 为例：shape 的键须是该图形已有的键，圆为 cx/cy/r）
el.animateTo({
    shape: {
        r: 50
    },
    style: {
        fill: 'red'
    },
    position: [10, 10]
}, {
    duration: 100,
    delay: 100,
    easing: 'cubicOut',
    done: function () {
        // done
    }
});

render2d.Animatable.stopAnimation(scope, forwardToLast)

停止动画。

参数

注意：第一参是 scope（字符串）。直接调用 stopAnimation(true) 不会停止任何动画——要跳到最后一帧需写 stopAnimation(undefined, true) 或 stopAnimation(null, true)。

render2d.BoundingRect

包围盒。

构造函数

render2d.BoundingRect(x, y, width, height)

render2d.BoundingRect.clone()

得到包围盒的副本。

返回值

新的包围盒，类型：render2d.BoundingRect。

render2d.BoundingRect.contain(x, y)

判断坐标 (x, y) 是否在图形上。

参数

返回值

返回是否在图形上，类型：boolean。

render2d.BoundingRect.copy(other)

从另一个包围盒复制属性。

参数

render2d.BoundingRect.intersect(other)

判断两个包围盒是否相交。

参数

返回值

是否相交，类型：boolean。

render2d.BoundingRect.union(other)

与另一个包围盒求并集，将结果更新到原本的包围盒。

参数

render2d.color

静态类

颜色。

render2d.color.lift(color, level)

提亮颜色。

参数

返回值

提亮后的颜色，类型：string，形如 rgba(...) 或 rgb(...)。

render2d.color.lerp(normalizedValue, colors, fullOutput)

快速得到渐变色 colors 在 normalizedValue 位置的颜色，返回混合后的颜色。

参数

返回值

如果 fullOutput 为 true，则返回包含 color、 leftIndex、 rightIndex、 value 的 Object，否则返回颜色。类型：Object|string。

render2d.color.modifyAlpha(color, alpha)

修改颜色的透明度维度。

参数

返回值

RGBA 形式的颜色字符串。

render2d.color.modifyHSL(color, h, s, l)

修改颜色的 HSL 维度。

参数

返回值

RGBA 形式的颜色字符串。

render2d.color.parse(colorStr, rgbaArr)

将各种形式的颜色字符串，转成 RGBA 形式的数组输出。

参数

返回值

如果 colorStr 不是合法的颜色，则返回 undefined，否则返回 rgbaArr。类型：undefined|number[]。

如果希望知道颜色字符串是否合法，应该使用返回值；如果希望在任何情况下都得到颜色，则应该使用参数 rgbaArr，如果颜色字符串不合法，会返回 [0, 0, 0, 1]，也就是黑色。

render2d.color.toHex(color)

将颜色转为十六进制的长度为 6 的字符串，开头没有 '#'。

参数

返回值

十六进制的颜色，类型：string。

例子

render2d.color.toHex('rgb(200, 0, 0)') 返回 'c80000'。

render2d.color.stringify(arrColor, type)

将数组形式的颜色转为字符串。

参数

返回值

颜色字符串，如：'rgba(255, 0, 0, 0.2)'，类型：string。

render2d.Displayable

继承自 render2d.Element

抽象类

可显示的元素。

注意：

render2d.Displayable 是一个抽象类，所以不要在代码中 new render2d.Displayable(opts)，这里的构造函数只是用于表明其子类（如 Rect 等）构造函数参数的共同部分。

元素初始化之后，需要通过 render2d.Element.attr 修改属性。

构造函数

render2d.Displayable(opts)

render2d.Text（或宿主 textContent）的 style（TextStyleProps，键名）：

宿主图形挂文字（Path/Image/Rect 等）：opts.textContent = new render2d.Text({style: {...}}) + opts.textConfig = { position, rotation, offset, distance, origin, local, layoutRect, insideFill, insideStroke, outsideFill }（ElementTextConfig，d.ts 可查）。旧表的 textPosition→textConfig.position、textDistance→textConfig.distance、textRotation→textConfig.rotation、textOffset→textConfig.offset、textOrigin→textConfig.origin、textRect→textConfig.layoutRect；transformText 无对应项（跟随变换由 textConfig.local 表达）。 | opts.style.blend | string | 'source-over' | 混合模式，同 Canvas globalCompositeOperation。 | | opts.zlevel | number | 0 | 决定绘画在哪层 Canvas 中。Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的 zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。 | | opts.z | number | 0 | 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。 | | opts.z2 | number | 0 | 与 z 类似，优先级比 z 更低。 |

render2d.Displayable.contain(x, y)

判断坐标 (x, y) 是否在图形上。

参数

返回值

返回是否在图形上，类型：boolean。

相关

render2d.Displayable.rectContain。

render2d.Displayable.dirty()#

设为需要更新。

render2d.Displayable.getBoundingRect()

得到元素的包围盒。

返回值

元素的包围盒，类型：render2d.BoundingRect。

render2d.Displayable.rectContain(x, y)

判断坐标 (x, y) 是否在图形包围盒内。

参数

返回值

返回是否在图形上，类型：boolean。

相关

render2d.Displayable.contain

render2d.Arc

继承自 render2d.Displayable

圆弧。

构造函数

render2d.Arc(opts)

render2d.BezierCurve

继承自 render2d.Displayable

贝塞尔曲线。

构造函数

render2d.BezierCurve(opts)

render2d.Circle

继承自 render2d.Displayable

圆。

构造函数

render2d.Circle(opts)

render2d.CompoundPath

继承自 render2d.Path

复合路径。相当于多个路径的并集。

构造函数

render2d.CompoundPath(opts)

render2d.Droplet

继承自 render2d.Displayable

水滴。

构造函数

render2d.Droplet(opts)

render2d.Ellipse

继承自 render2d.Displayable

椭圆。

构造函数

render2d.Ellipse(opts)

render2d.Heart

继承自 render2d.Displayable

心形。

构造函数

render2d.Heart(opts)

render2d.Image

继承自 render2d.Displayable

图像。

构造函数

render2d.Image(opts)

render2d.Isogon

继承自 render2d.Displayable

正多边形。

构造函数

render2d.Isogon(opts)

render2d.Line

继承自 render2d.Displayable

线段。

构造函数

render2d.Line(opts)

render2d.Path

继承自 render2d.Displayable

路径。

构造函数

render2d.Path(opts)

render2d.Path.extend(props)

扩展一个 Path 元素，用以生成比如星形，圆等。

参数

extend 实际只使用 shape/style 两个默认值键，其余函数类型的键（buildPath、init、beforeBrush、afterBrush、getBoundingRect 等）挂到子类原型上；非函数的其它键被忽略。

render2d.Polygon

继承自 render2d.Displayable

多边形。

构造函数

render2d.Polygon(opts)

继承自 render2d.Displayable

多边形折线段。默认是不闭合的，如果需要闭合，请将最后一个点设为和第一个点同样的位置。

构造函数

render2d.Polyline(opts)

继承自 render2d.Displayable

矩形。

构造函数

render2d.Rect(opts)

render2d.Rose

继承自 render2d.Displayable

构造函数

render2d.Rose(opts)

render2d.Sector

继承自 render2d.Displayable

扇形。

构造函数

render2d.Sector(opts)

render2d.Star

继承自 render2d.Displayable

星形。

构造函数

render2d.Star(opts)

render2d.Text

继承自 render2d.Displayable

文字。

构造函数

render2d.Text(opts)

render2d.Trochoid

内外旋轮曲线

继承自 render2d.Displayable

构造函数

render2d.Trochoid(opts)

render2d.Element

抽象类

元素，可以被添加到场景中。

注意：

render2d.Element 是一个抽象类，所以不要在代码中 new render2d.Element(opts)，这里的构造函数只是用于表明其子类构造函数参数的共同部分。

render2d.Element.afterUpdate

类型：Function，元素更新后的回调函数。

相关

render2d.Element.beforeUpdate。

render2d.Element.attr(key, value)

设置元素属性。需要注意的是，应该始终调用该方法来修改属性，而不是直接 element.xxx = ... 这样的形式，因为后者不会重绘物体。

参数

例子

element.attr('position', [100, 200]);
element.attr({
    style: {
        fill: 'red'
    },
    shape: {
        x: 100
    }
});

render2d.Element.beforeUpdate#

类型：Function，元素更新前的回调函数。

相关

render2d.Element.afterUpdate。

render2d.Element.hide()#

隐藏元素，可以使用 render2d.Element.show 恢复显示。

相关

render2d.Element.show。

render2d.Element.removeClipPath()#

取消设置裁剪元素。

相关

render2d.Element.setClipPath。

render2d.Element.setClipPath(clipPath)#

设置裁剪元素，超出 clipPath 区域的部分将被裁剪掉。

一个元素只能被一个元素裁剪，如果要实现多个元素的裁剪，需要使用 render2d.CompoundPath。

参数

相关

render2d.Element.removeClipPath。

render2d.Element.show()#

显示元素。元素在默认情况下是显示状态，使用 render2d.Element.hide 隐藏后，可以使用此方法显示。

相关

render2d.Element.hide。

render2d.Element.traverse(cb, context)#

深度优先遍历所有子孙节点（不含自身）。⚠️ 只有 Group 实现了遍历，普通图形元素上调用是空操作。

参数

render2d.Eventful

支持事件的元素。

⚠️ Eventful 是内部混入类，vjmap3d.render2d 上没有导出（new render2d.Eventful() 会抛错）；下列方法通过 Element/Group 等图形元素使用，如 el.on('click', cb)。

render2d.Eventful.isSilent(event)

该事件是否为静默（即没有绑定任何处理器）。

参数

返回值

该事件没有绑定处理器时返回 true，类型：boolean。

render2d.Eventful.off(event, handler)

解绑事件。

参数

返回值

this。

render2d.Eventful.on(event, handler, context)

绑定事件。

参数

返回值

this。

render2d.Eventful.one(event, handler, context)

⚠️ 本包的 Eventful 没有 one 方法（el.one(...) 抛 TypeError）。需要单次触发时在回调里自行 el.off(event, handler)。

render2d.Eventful.trigger(event)

触发事件。

参数

返回值

this。

render2d.Gradient

抽象类

渐变。

注意：

render2d.Gradient 是一个抽象类，所以不要在代码中 new render2d.Gradient(colorStops)，这里的构造函数只是用于表明其子类构造函数参数的共同部分。

构造函数

render2d.Gradient(colorStops)

render2d.Gradient.addColorStop(offset, color)

增加渐变色。

参数

如果想要清除渐变色，可以使用 this.colorStops = []。

render2d.Group

继承自 render2d.Element

组。Group 是一个容器，可以插入子节点，Group 的变换也会被应用到子节点上。

构造函数

render2d.Group()

例子

var g = new render2d.Group();
g.position[0] = 100;
g.position[1] = 100;
g.add(new render2d.Circle({
    shape: {   // 几何参数放 shape（圆为 cx/cy/r），不是 style
        cx: 100,
        cy: 100,
        r: 20,
    }
}));

render2d.Group.add(child)#

添加子节点到最后。

参数

返回值

this。

render2d.Group.addBefore(child, nextSibling)#

添加子节点到 nextSibling 之前。

参数

返回值

this。

相关

render2d.Group.add、render2d.Group.remove。

render2d.Group.childAt(idx)#

返回特定序号的子元素，类型：Element。

相关

render2d.Group.childOfName、 render2d.Group.children。

render2d.Group.childCount()#

返回子元素个数，类型：number。

render2d.Group.childOfName(name)#

返回特定名字的子元素，类型：Element。

相关

render2d.Group.childAt、 render2d.Group.children。

render2d.Group.children()#

返回所有子元素，类型：Element[]。

相关

render2d.Group.childAt、 render2d.Group.childOfName。

render2d.Group.dirty()#

将组设为需要更新。

render2d.Group.eachChild(cb, context)#

遍历所有子节点。

参数

render2d.Group.getBoundingRect(includeChildren)#

得到 includeChildren 或组内所有元素的包围盒。

参数

返回值

includeChildren 或组内所有元素的包围盒，类型：render2d.BoundingRect。

render2d.Group.remove(child)#

移除子节点。

参数

相关

render2d.Group.add、 render2d.Group.removeAll。

render2d.Group.removeAll()#

移除所有子节点。

相关

render2d.Group.add、 render2d.Group.remove。

render2d.Group.silent#

类型：boolean，默认值：false，所有子孙元素是否响应鼠标事件。

render2d.LinearGradient

**继承自 render2d.Gradient 线性渐变。

构造函数

render2d.LinearGradient(x, y, x2, y2, colorStops, globalCoord)

render2d.matrix

静态类

3x2 的矩阵，用以表示二维物体的位移、旋转、缩放。

用长度为 6 的普通数组 number[] 表示矩阵（本包 MatrixArray = number[]，始终不是 Float32Array）。

render2d.matrix.copy(out, m)#

将矩阵 m 复制给矩阵 out。不会创建新矩阵，而是将 out 的元素进行改变。

参数

返回值

修改后的 out，类型：number[]。

render2d.matrix.create()#

创建一个单位矩阵。

返回值

新创建的单位矩阵，类型：number[]，元素个数为 6。

render2d.matrix.identity(out)#

将 out 设为单位矩阵，也就是 [1, 0, 0, 1, 0, 0]。不会创建新矩阵，而是将 out 的元素进行改变。

参数

返回值

修改后的 out，类型：number[]。

render2d.matrix.invert(out, m)#

求到矩阵 m 的逆矩阵，得到的结果赋值给 out。

参数

返回值

修改后的 out，类型：number[]。

render2d.matrix.mul(out, m1, m2)#

将矩阵 m1 与 m2 相乘，得到的结果赋值给 out。

参数

返回值

修改后的 out，类型：number[]。

render2d.matrix.rotate(out, m, rad)#

将矩阵 m 旋转 rad 弧度，得到的结果赋值给 out。

参数

返回值

修改后的 out，类型：number[]。

render2d.matrix.scale(out, m, v)#

将矩阵 m 沿向量 v 缩放，得到的结果赋值给 out。

参数

返回值

修改后的 out，类型：number[]。

render2d.matrix.translate(out, m, v)#

将矩阵 m 沿向量 v 平移，得到的结果赋值给 out。

参数

返回值

修改后的 out，类型：number[]。

render2d.path

静态类

路径相关的辅助函数。

render2d.path.createFromString(str, opts)#

从字符串创建路径，字符串形如 SVG Path。

参数

render2d.path.extendFromString(str, opts)#

从字符串扩展路径，字符串形如 SVG Path。

参数

相关

render2d.Path.extend。

render2d.path.mergePath(pathEls, opts)#

合并多条路径。

参数

render2d.Pattern

图案。

构造函数

render2d.Pattern(image, repeat)

render2d.RadialGradient

**继承自 render2d.Gradient **

径向渐变。

构造函数

render2d.RadialGradient(x, y, r, colorStops, globalCoord)

render2d.Transformable

可进行变换的对象，变换包括：位移、旋转、缩放。

构造函数

render2d.Transformable(opts)

参数

render2d.Transformable.decomposeTransform()

分解 transform 矩阵到 position、 rotation、 scale。通常用于修改 transform 后同步position、 rotation、 scale 属性。

render2d.Transformable.getGlobalScale()

获得全局的缩放。也就是说会祖先元素的缩放也会计算在内。

返回值

缩放，类型： number[]。

render2d.Transformable.origin

旋转和缩放的原点，类型： number[]。

render2d.Transformable.position

位移，类型： number[]。

render2d.Transformable.rotation

旋转的弧度，类型： number。

render2d.Transformable.scale

缩放，类型： number[]。

render2d.Transformable.transform

矩阵形式表示位移、旋转、缩放，类型： render2d.matrix。

render2d.Transformable.transformCoordToGlobal(x, y)

变换局部坐标位置到全局坐标空间。

参数

render2d.Transformable.transformCoordToLocal(x, y)

变换坐标位置到元素的局部坐标空间。

参数

render2d.util

静态类

常用辅助函数。

render2d.util.bind(func, context)#

修改执行上下文。

参数

render2d.util.clone(source)#

深度拷贝一个对象。

参数

返回值

克隆结果，类型：Object|Array|TypedArray|number|string|null|undefined。

render2d.util.createCanvas()#

获得一个 Canvas，不设置宽高。相当于 document.createElement('canvas')。

返回值

Canvas，类型：HTMLCanvasElement。

相关

render2d.util.createCanvas().getContext('2d') 获取 2D 上下文（本包无 util.getContext）。

render2d.util.curry(func)#

函数柯里化。

参数

render2d.util.defaults(target, source, overlay)#

将一个对象中的元素赋给另一个元素。

参数

返回值

拷贝结果，即 target。

相关

render2d.util.mixin。

render2d.util.each(array, cb, context)#

遍历数组。相当于 Array.prototype.forEach。

参数

render2d.util.extend(target, source)#

将 source 中非继承来的属性赋给 target。

参数

返回值

拷贝结果，即 target。

render2d.util.filter(array, cb, context)#

过滤元素。相当于 Array.prototype.filter。

参数

render2d.util.find(array, cb, context)#

相当于 Array.prototype.find。

参数

返回值

返回数组 array 中第一个找到的元素，类型：*。

render2d.util.getContext()#

⚠️ 本包的 render2d.util 没有 getContext（调用抛 TypeError）。需要 2D 上下文请写 render2d.util.createCanvas().getContext('2d')。

render2d.util.indexOf(array, value)#

查询数组中元素，返回下标。

参数

返回值

下标，类型：number。

render2d.util.inherits(clazz, baseClazz)#

构造类继承关系：clazz（子类）继承 baseClazz（基类）的原型方法、属性，clazz 会有 superClass 属性，指向 baseClazz。

参数

render2d.util.isArray(data)#

是否是数组。

参数

返回值

是否是数组，类型：boolean。

相关

render2d.util.isArrayLike。

render2d.util.isFunction(data)#

是否是函数。

参数

返回值

是否是函数，类型：boolean。

render2d.util.isObject(data)#

是否是对象。

参数

返回值

是否是对象，类型：boolean。

render2d.util.isString(data)#

是否是字符串。

参数

返回值

是否是字符串，类型：boolean。

render2d.util.map(array, cb, context)#

映射数组。相当于 Array.prototype.map。

参数

render2d.util.merge(target, source, overwrite)#

拷贝一个对象。

参数

返回值

拷贝结果，即 target。

render2d.util.reduce(array, cb, memo, context)#

相当于 Array.prototype.reduce。

参数

render2d.util.slice(array, start, end)#

相当于 Array.prototype.slice。

参数

返回值

数组 array 在 start（包含）位置到 end（不包含）位置的浅拷贝数组，类型：[]。

render2d.vector

静态类

长度为 2 的向量。

向量始终是普通数组 number[]（本包 VectorArray = number[]，不是 Float32Array）。

render2d.vector.add(out, v1, v2)#

将向量 v1 与 v2 相加，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

相关

render2d.vector.scaleAndAdd。

render2d.vector.applyTransform(out, v, m)#

矩阵 m 左乘向量 v，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

render2d.vector.copy(out, v)#

将向量 v 复制给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

render2d.vector.clone(v)#

将向量 v 复制，产生一个新副本。

返回值

新创建的向量，类型：number[]。

render2d.vector.distance(v1, v2)#

得到向量 v1 与 v2 间距离。

参数

返回值

距离，类型：number。

render2d.vector.distanceSquare(v1, v2)#

得到向量 v1 与 v2 间距离的平方。

参数

返回值

距离的平方，类型：number。

render2d.vector.div(out, v1, v2)#

将向量 v1 与 v2 的每个元素分别相除，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

render2d.vector.dot(v1, v2)#

将向量 v1 与 v2 点乘，返回点积。

参数

返回值

点积，类型：number。

render2d.vector.len(v)#

求向量 v 的模长，即 √(x² + y²)。

参数

返回值

模长，类型：number。

render2d.vector.lenSquare(v)#

求向量 v 的模长的平方。

参数

返回值

模长平方，类型：number。

render2d.vector.lerp(out, v1, v2, t)#

将向量 v1 与 v2 在 t 位置进行插值，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

插值后的向量 out，类型：number[]。

render2d.vector.max(out, v1, v2)#

求两个向量每个元素的最大值，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

相关

render2d.vector.min。

render2d.vector.min(out, v1, v2)#

求两个向量每个元素的最小值，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

render2d.vector.mul(out, v1, v2)#

将向量 v1 与 v2 相乘，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

render2d.vector.negate(out, v)#

将向量 v 的负向量输出到 out，也就是每个元素都变成相反数。

参数

返回值

负向量 out，类型：number[]。

render2d.vector.normalize(out, v)#

将向量 v 归一化输出到 out，也就是将其模长变为 1。

参数

返回值

归一化后的 out，类型：number[]。

render2d.vector.scale(out, v, s)#

将向量 v 缩放 s 倍，得到的结果赋值给 out。

参数

返回值

输出向量，类型：number[]。

相关

render2d.vector.scaleAndAdd。

render2d.vector.scaleAndAdd(out, v1, v2, scale)#

将向量 v2 缩放 scale 倍后，与 v1 相加，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

相关

render2d.vector.add、render2d.vector.scale。

render2d.vector.set(out, a, b)#

将值 (a, b) 赋给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。

render2d.vector.sub(out, v1, v2)#

将向量 v1 与 v2 相减，赋值给向量 out。不会创建新向量，而是将 out 的元素进行改变。

参数

返回值

输出向量，类型：number[]。