如何使用CreateJS绘制弯曲箭头
How to draw a curved arrow using CreateJS?
用于绘制弯曲箭头的JavaScript代码已经在这个fiddle中可用:http://jsfiddle.net/SguzM/
我想使用CreateJS库做同样的事情。
来自上面小提琴的代码如下:
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
function drawArrowhead(locx, locy, angle, sizex, sizey) {
var hx = sizex / 2;
var hy = sizey / 2;
ctx.translate((locx ), (locy));
ctx.rotate(angle);
ctx.translate(-hx,-hy);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,1*sizey);
ctx.lineTo(1*sizex,1*hy);
ctx.closePath();
ctx.fill();
}
// returns radians
function findAngle(sx, sy, ex, ey) {
// make sx and sy at the zero point
return Math.atan((ey - sy) / (ex - sx));
}
var sx = 50;
var sy = 190;
var ex = 100;
var ey = 10;
ctx.beginPath();
ctx.fillStyle = "rgba(55, 217, 56,1)";
ctx.moveTo(10,10);
ctx.quadraticCurveTo(sx, sy, ex, ey);
ctx.stroke();
var ang = findAngle(sx, sy, ex, ey);
ctx.fillRect(ex, ey, 2, 2);
drawArrowhead(ex, ey, ang, 12, 12);
在CreateJS中,Graphics类提供了arc/arcTo、bezierCurveTo和quadraticCurveTo方法来绘制曲线。
通过使用Math.atan2(y, x).
,可以轻松地计算坡度的弧度值。在CreateJS中,rotation
属性使用度数,因此将弧度值转换为度数,并根据度数旋转箭头。
这是jsfiddle:http://jsfiddle.net/10rceqj5/1/
JavaScript:
var stage = new createjs.Stage("demoCanvas");
drawingCanvas = new createjs.Shape();
stage.addChild(drawingCanvas);
drawingCanvas.graphics.setStrokeStyle(1).beginStroke(createjs.Graphics.getRGB(0,0,0)).moveTo(10, 10).curveTo(50, 190, 90, 10);
drawArrow(Math.atan2((10 - 190), (90 - 50)), 90, 10);
drawingCanvas.graphics.moveTo(10, 110).bezierCurveTo(10, 240, 90, 240, 90, 110);
drawArrow(Math.atan2((110 - 240), (90 - 90)), 90, 110);
drawingCanvas.graphics.moveTo(10, 210).quadraticCurveTo(50, 390, 90, 210);
drawArrow(Math.atan2((210 - 390), (90 - 50)), 90, 210);
stage.update();
function drawArrow(radian, x, y) {
var arrow = new createjs.Shape();
arrow.graphics.beginStroke(createjs.Graphics.getRGB(0, 0, 0)).moveTo(-5, +5).lineTo(0, 0).lineTo(-5, -5);
var degree = radian / Math.PI * 180;
arrow.x = x;
arrow.y = y;
arrow.rotation = degree;
stage.addChild(arrow);
}
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 弯曲拐角IE 7,8问题
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 在WebGL中绘制多个二维图像
- JSXGraph:如何绘制带有箭头和无点标记的矢量
- 如何使用CreateJS绘制弯曲箭头