README

用于Yii2操作和动画SVG的轻量级库。

安装

安装此扩展的首选方式是通过composer。

运行以下命令

php composer.phar require --prefer-dist dominus77/yii2-svg-widget "*"

或者在您的composer.json文件的require部分添加以下内容

"dominus77/yii2-svg-widget": "*"

使用方法

扩展安装后，只需在代码中使用即可

<div id="drawing"></div>
<?php \dominus77\svg\SvgWidget::widget([
    'elementId' => 'drawing',
    'clientScript' => new \yii\web\JsExpression("
        draw.rect(100, 100).move(100, 50).fill('#f06');
    "),
]); ?>

示例

获取示例数据

<?php
$fileName = 'russia'; // russia or world
$file = Yii::getAlias('@dominus77/svg/example') . "/" . $fileName . ".json";
$data = file_get_contents($file);
?>

渲染地图

<div id="svg_map_russia"></div>

<?php \dominus77\svg\SvgWidget::widget([
    'elementId' => 'svg_map_russia',
    'clientScript' => new \yii\web\JsExpression("
        var data = {$data};
        var mapDraw = draw.size(1000, 550);
        // draw individual data
        for(var i = 0, il = data.length; i < il; i++){
            mapDraw.path(data[i]['d'])
                .fill('none')
                .stroke({color: data[i]['stroke'], width: data[i]['stroke-width']});

        }
    "),
]); ?>

渲染交互式地图

<div style="position: absolute" id="info"></div>
<div style="border:1px solid #ccc; width:502px;" id="svg_interactive_map_russia"></div>

<?php \dominus77\svg\SvgWidget::widget([
    'elementId' => 'svg_interactive_map_russia',
    'panZoom' => true, // on svg.panzoom.js plugin
    'clientScript' => new \yii\web\JsExpression("
        var data = {$data};
        var info = document.getElementById('info');

        // color region
        var colorOut = '#fff';
        var colorOver = '#ccc';

        // create draw
        var mapDraw = draw.size(500, 300).viewbox(0, 0, 1000, 550);

        // svg.panzoom.js plugin
        mapDraw.panZoom({zoomMin: 0.5, zoomMax: 20});
        mapDraw.zoom(0.5)
            .animate()
            .zoom(2, {x:50, y:280});

        // draw individual data
        for(var i = 0, il = data.length; i < il; i++) {
            var region = mapDraw.path(data[i]['d'])
                .id(data[i]['id'])
                .fill(colorOut)
                .style('cursor', 'pointer')
                .stroke({color: data[i]['stroke'], width: data[i]['stroke-width']});

            // add attribute title in path
            var title = data[i]['title'];
            region.attr({title: title});

            region.mouseover(function(e) {
                var elem = document.getElementById(e.target.id);
                var title = elem.getAttribute('title');
                info.innerHTML = e.target.id + ' - ' + title;
                this.fill({color: colorOver});
            });

            region.mouseout(function(e) {
                this.fill({color: colorOut});
                info.innerHTML = '';
            });

            region.click(function(e) {
                var elem = document.getElementById(e.target.id);
                var title = elem.getAttribute('title');
                console.log(e.target.id + ' - ' + title);
            });
        }
    "),
]); ?>

更多信息

请参阅SVG.js

许可证

BSD许可证。请参阅许可证文件以获取更多信息。