如何使用画布或楔形在 iPad 上通过触摸事件动态绘制饼图的一部分答案

【问题标题】：How to draw portion of pie image using canvas or Wedge shape in kinetic with touch event on iPad如何使用画布或楔形在 iPad 上通过触摸事件动态绘制饼图的一部分
【发布时间】：2013-07-19 10:50:24
【问题描述】：

我在动力学框架中使用画布或楔形来加载 2 个圆形图像，1 个用于图像背景，1 个用于图像百分比。我为画布容器绑定了 touchstart、touchmove、touchend 事件。然后我面临 2 个问题：首先如何使用画布加载一部分圆形图像。例如：只需加载 1/4 的图像圈。第二件事是如何根据触摸点计算饼图的部分，当我们触摸并移动手指时，饼图的百分比也会增加和减少。

请给我一些建议或例子。提前致谢

【问题讨论】：

标签： html canvas html5-canvas

【解决方案1】：

如何绘制包含根据点击/点击而变化的图像的楔形

对于您的内部“楔形”，您可以使用 Kinetic.Group 对象并使用 clipFunc 将图像裁剪为楔形

这是 image-wedge 的 clipFunc：

    clipFunc: function(canvas) {
        var ctx = canvas.getContext();
        var w=wedgeWidth;
        var h=wedgeHeight;
        var r=wedgeRadius;
        var angle1=0; // start at vertical
        var angle2=angle1+radianAngle;
        ctx.moveTo(cx,cy);
        ctx.arc(cx,cy,r,angle1,angle2,false);
        ctx.closePath();
    }

radianAngle 是控制楔形大小的变量。

您可以像这样设置弧度角（和楔形大小）：

// if the user clicks/taps on the stage
// redraw the image-wedge to the angle of the click/tap
function setRadianAngle(touchX,touchY){
    radianAngle=(Math.atan2(touchY-cy,touchX-cx)+Math.PI*2)%(Math.PI*2);
    layer.draw();
}

这是代码和小提琴：http://jsfiddle.net/m1erickson/DxZLJ/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    enableStageClick();

    function enableStageClick(){
        $(stage.getContent()).on('click tap', function (event) {
            var pos=stage.getMousePosition();
            var mouseX=parseInt(pos.x);
            var mouseY=parseInt(pos.y);
            console.log(mouseX+"/"+mouseY);
            setRadianAngle(mouseX,mouseY);
        });
    }


  var wedgeWidth=300;
  var wedgeHeight=300;
  var wedgeRadius=100;
  var borderRadius=20;
  var radianAngle=135*Math.PI/180;
  var cx=wedgeWidth/2;
  var cy=wedgeHeight/2;

  // create the outside "border" circle
  var border = new Kinetic.Circle({
    x: wedgeWidth/2,
    y: wedgeHeight/2,
    radius: wedgeRadius+borderRadius,
    fill:"skyblue",
    stroke: "blue",
    strokeWidth: 5
  });    
  layer.add(border);


  // create the inside "image-wedge" group
  var wedge=new Kinetic.Group({
      x:0,
      y:0,
      width:wedgeWidth,
      height:wedgeHeight,
      // clip to a wedge with angle==degreeAngle off vertical
      clipFunc: function(canvas) {
          var ctx = canvas.getContext();
          var w=wedgeWidth;
          var h=wedgeHeight;
          var r=wedgeRadius;
          var angle1=0; // start at vertical
          var angle2=angle1+radianAngle;
          ctx.moveTo(cx,cy);
          ctx.arc(cx,cy,r,angle1,angle2,false);
          ctx.closePath();
      }
  });
  layer.add(wedge);

  // create the image that will be clipped inside the wedge
  var image=new Kinetic.Image({
      image:image,
      x:0,
      y:0,
      width:wedgeWidth,
      height:wedgeHeight,
  });
  wedge.add(image);

  // load the image for the Kinetic Image object
  var img=new Image();
  img.onload=function(){
      image.setImage(img);
      layer.draw();
  }
  img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";


  // if the user clicks/taps on the stage
  // redraw the image-wedge to the angle of the click/tap
  function setRadianAngle(touchX,touchY){
      radianAngle=(Math.atan2(touchY-cy,touchX-cx)+Math.PI*2)%(Math.PI*2);
      layer.draw();
  }



}); // end $(function(){});

</script>       
</head>

<body>
    <p>Click/Touch to change angle of wedge-image</p>
    <div id="container"></div>
</body>
</html>

【讨论】：