QuarkRenderer入门之创建基本元素

QuarkRenderer是一个专注canvas绘制图形的库，今天带来QuarkRenderer入门教程之创建基本图形。

1: 生成画布

• 在html上创建一个标准DIV元素

<div id="main" style="width:1000px;height:800px;"></div>

• 绑定此元素

下面代码是生成一个画布，并画一个标准矩形

        let qr = QuarkRenderer.init(document.getElementById('main'));
        let rect = new QuarkRenderer.Rect({
            draggable:true,    // 是否开启拖动
            showTransformControls:true, // 是否开启缩放控件，这是API自带方法
            position:[200,200],
            shape: {
                r: 0,
                width: 100,
                height: 100
            },
            style: {
                fill: '#ff0000',
                lineWidth: 1,
                text:'...',
                textPosition:'inside'
            }
        });
        qr.add(rect);

然后继续添加文本元素到矩形元素里面

        // 矩形添加文本
        let text = new QuarkRenderer.Text({
            style: {
                x: 0,
                y: 0,
                text: '国国国国\n国国国国国\n国国国国国国',
                width: 50,
                height: 50,
                textFill: '#000',
                textFont: '18px Microsoft Yahei'
            },
            draggable: true
        });
        rect.add(text);

最后生成样式如下：

总结：QuarkRenderer 基本添加元素有很多，本文教程只列了其中2种，还有如下图所示:

大家可以自己去调试看看.

基本文档地址: https://www.zixuephp.com/static/res/quark-renderer/api/