Question

只是想知道有没有人有任何解决方案来放大图表上的区域。当我说区域我的意思是，你在画布上的一个点上鼠标，在按下时将鼠标移动到另一个位置，当鼠标向上时我想要放大到那个块。并且只缩放x轴，而不是y。

这正是我想做的事情 - http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/

现在我已经可以放大了，但缩放后我的图表很乱。线条和点都是拉伸，扭曲等，我试图用刻度来调整。

这是我到目前为止所做的事情。

@Entity
public class PortfolioRule  {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "PORTFOLIO_RULE_ID")
    private int portfolioRuleId;

    @Column(name = "RULES_JSON")
    private List<Condition> conditions;

像这样放大了，但正如我所说，它变得一团糟。

如果有人在过去做过类似事情，就像上面的例子一样，我会非常感谢你的帮助。

肖恩。

Answer 1

以下是一个快速举例说明如何选择＆amp;显示图表的子集

＆＃13;

// canvas vars
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font='14px arial';
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
    var BB=canvas.getBoundingClientRect();
    offsetX=BB.left;
    offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var isDrilled=false;
var isDown=false;
var startX,startY;

// graph vars
var axisY=ch/3;
var points=[];

// DEMO: add random data points
var demoPointCount=50;
for(var i=0;i<demoPointCount;i++){
    points.push({y:Math.random()*150-75});
}

// draw the full data graph
draw(points,axisY);

// listen to mouse events
window.onmousedown=(function(e){handleMouseDown(e);});
window.onmousemove=(function(e){handleMouseMove(e);});
window.onmouseup=(function(e){handleMouseUpOut(e);});
window.onmouseout=(function(e){handleMouseUpOut(e);});


function draw(pts,axisY,startX,mouseX,drillStart,drillEnd){
    // redraw the given pts data
    ctx.clearRect(0,0,cw,ch);
    ctx.beginPath();
    ctx.moveTo(0,pts[0].y+axisY);
    for(var i=0;i<pts.length;i++){
        var x=cw/(pts.length-1)*i;
        ctx.lineTo(x,pts[i].y+axisY);
    }
    ctx.stroke();
    // used when highlighting a drilldown section of full data
    if(startX && mouseX){
        ctx.globalAlpha=0.10;
        ctx.fillStyle='black';
        ctx.fillRect(startX,0,mouseX-startX,ch);
        ctx.globalAlpha=1.00;
    }else if(drillStart && drillEnd){
        ctx.fillText('Viewing '+drillStart+' - '+drillEnd+'. Click to return to all data view.',10,20);
    }else{
        ctx.fillText('Drag to select data to drill into.',10,20);
    }
}

function handleMouseDown(e){
  // if displaying drilled data, return to full data
  if(isDrilled){
      isDrilled=false;
      draw(points,axisY);
      return;
  }
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // start mouse position
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);
  // Put your mousedown stuff here
  isDown=true;
}

function handleMouseUpOut(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  // Put your mouseup stuff here
  isDown=false;
  isDrilled=true;
  // normalize
  if(mouseX<startX){ var t=startX; startX=mouseX; mouseX=t; }
  // fetch highlighted start & end data points
  drillStart=parseInt(startX/cw*points.length);
  drillEnd=parseInt(mouseX/cw*points.length);
  var subset=points.slice(drillStart,drillEnd+1);
  // draw the data subset
  draw(subset,axisY,null,null,drillStart,drillEnd);
}

function handleMouseMove(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  // Put your mousemove stuff here
  draw(points,axisY,startX,mouseX);
}

＆＃13;

body{ background-color:white; }
#canvas{border:1px solid red; }

＆＃13;

<canvas id="canvas" width=512 height=512></canvas>

＆＃13;

[以前过时的回答]

这是一种缩放方式，可以毫不费力地记住转换

这是一个快速思考，因此可能需要一些修补。

通过在第二个内存中画布上绘制图形来复制图形：

var memCanvas=myCanvas.cloneNode();
var memCtx=memCanvas.getContext('2d');
memCtx.drawImage(myCanvas,0,0);

将memCanvas绘制到显示的画布上：
```
context.drawImage(memCanvas,0,0);
```
在mousedown上，抓住选择框的左上角坐标。
在鼠标上，抓住选择框的右下角坐标。 注意：你可能需要翻转顶部和底部或左边＆amp;如果顶部＆gt;底部或左侧＆gt;右侧。

计算将全帧选择框绘制到可见画布中所需的缩放系数：

var scale = Math.min(
    (myCanvas.width/selectionboxWidth),   
    (myCanvas.height/selectionboxHeight)
);

使用drawImage的裁剪形式从memCanvas中拉出选择框并将其缩放到可见画布中：

var x=sboxLeft;
var y=sboxTop;
var w=sboxRight-sboxLeft; 
var h=sboxBottom-sboxTop;
sboxcontext.drawImage(
    memCanvas,            // fetch from the memCanvas
    x,y,w,h,              // clip the selected box
    0,0,w*scale,h*scale); // scale the selected box into the visible canvas

然后，当您想要取消缩放时，只需将完整的memCanvas重绘为可见的画布（无需转换）。结果图不是一团糟！

context.drawImage(memCanvas,0,0);  // unzoomed -- simply!

HTML Canvas缩放到图表上的区域

1 个答案: