Question

我用画布构建十六进制地图。我必须用右键btn绘制一些细节。我使用d3js来缩放和移动画布。问题是我用右键无法正确绘制。

我创建了一个简单的例子来说明错误。

＆＃13;

rowname   codes    remark
  apple     44        bad
  banana
  grapes    54        good
  oranges

＆＃13;

尝试使用右键拖动画布。
尝试用左手拖一点后。

你会看到，第一次拖动已经有效但没有绘制。

我不想按右键进行任何移动，缩放等操作。请帮忙

Answer 1

检查mousedown并取消缩放/平移，如果它是错误的按钮：

<script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <div id="map_canvas">
        <canvas></canvas>
    </div>
<script>
var width = $('#map_canvas').width(),
    height = 700;
var ctx;

function zooms() {
    ofsetx = d3.event.translate[0];
    ofsety = d3.event.translate[1];
    scale = d3.event.scale;
    ctx.save();
    ctx.clearRect(0, 0, width, height);
    ctx.translate(d3.event.translate[0], d3.event.translate[1]);
    ctx.scale(d3.event.scale, d3.event.scale);
    draw()
     ctx.restore();
}

function draw() {
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();
}

var zoom = d3.behavior.zoom()
    .scaleExtent([-2, 10])
    .on("zoom", zooms)

$(function() {
    ctx = d3.select("canvas")
    .attr("width", width)
    .attr("height", height)
    .attr("ofsetx", 0)
    .attr("ofsety", 0)
    .on("mousedown", function(){
      if (d3.event.button !== 0){
        d3.event.stopImmediatePropagation();
      }
    })
    .call(zoom)
    .on("dblclick.zoom", null)
    .on("contextmenu", function (d, i) {
        d3.event.preventDefault();
    })
    .node().getContext("2d");
    draw();
});
</script>

d3js拖动右键

1 个答案: