<template>
    <div id="zoom">
        <h3 class="title">裁剪图</h3>
        <canvas width="960" height="400"></canvas>
    </div>
</template>
<script>
    import apiPath from '@/service/apiPath'
    import * as d3 from 'd3'
    export default {
        name: 'zoom',
        data() {
            return {
                
            }
        },
        created() {
            var vm = this;
			 vm.$nextTick(function(){
				var canvas = d3.select("#zoom canvas"),
			    context = canvas.node().getContext("2d"),
			    width = canvas.property("width"),
			    height = canvas.property("height"),
			    radius = 2.5;

			var points = d3.range(2000).map(phyllotaxis(10));

			canvas.call(d3.zoom()
			    .scaleExtent([1 / 2, 4])
			    .on("zoom", zoomed));

			drawPoints();

			function zoomed() {
			  context.save();
			  context.clearRect(0, 0, width, height);
			  context.translate(d3.event.transform.x, d3.event.transform.y);
			  context.scale(d3.event.transform.k, d3.event.transform.k);
			  drawPoints();
			  context.restore();
			}

			function drawPoints() {
			  context.beginPath();
			  points.forEach(drawPoint);
			  context.fill();
			}

			function drawPoint(point) {
			  context.moveTo(point[0] + radius, point[1]);
			  context.arc(point[0], point[1], radius, 0, 2 * Math.PI);
			}

			function phyllotaxis(radius) {
			  var theta = Math.PI * (3 - Math.sqrt(5));
			  return function(i) {
			    var r = radius * Math.sqrt(i), a = theta * i;
			    return [
			      width / 2 + r * Math.cos(a),
			      height / 2 + r * Math.sin(a)
			    ];
			  };
			}   

            });

        }
    }
</script>
<style lang="less" scoped>
    #zoom {
        .title{
            color: #409EFF;
        }
        .main{
        }
    }
</style>