使用KineticJS HTML5画布修改曲线锚点
来源:互联网 发布:淘宝页头名字怎么居中 编辑:程序博客网 时间:2024/06/15 01:40
产品说明:使用鼠标或手指和拖放锚点来修改二次曲线的曲率和曲线。
<!DOCTYPE HTML><html> <head> <style> body { margin: 0px; padding: 0px; } </style> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script> <script defer="defer"> // globals var curveLayer, lineLayer, anchorLayer, quad, bezier function updateDottedLines() { var q = quad; var b = bezier; var quadLine = lineLayer.get('#quadLine')[0]; var bezierLine = lineLayer.get('#bezierLine')[0]; quadLine.setPoints([q.start.attrs.x, q.start.attrs.y, q.control.attrs.x, q.control.attrs.y, q.end.attrs.x, q.end.attrs.y]); bezierLine.setPoints([b.start.attrs.x, b.start.attrs.y, b.control1.attrs.x, b.control1.attrs.y, b.control2.attrs.x, b.control2.attrs.y, b.end.attrs.x, b.end.attrs.y]); lineLayer.draw(); } function buildAnchor(x, y) { var anchor = new Kinetic.Circle({ x: x, y: y, radius: 20, stroke: '#666', fill: '#ddd', strokeWidth: 2, draggable: true }); // add hover styling anchor.on('mouseover', function() { document.body.style.cursor = 'pointer'; this.setStrokeWidth(4); anchorLayer.draw(); }); anchor.on('mouseout', function() { document.body.style.cursor = 'default'; this.setStrokeWidth(2); anchorLayer.draw(); }); anchor.on('dragend', function() { drawCurves(); updateDottedLines(); }); anchorLayer.add(anchor); return anchor; } function drawCurves() { var context = curveLayer.getContext(); context.clear(); // draw quad context.beginPath(); context.moveTo(quad.start.attrs.x, quad.start.attrs.y); context.quadraticCurveTo(quad.control.attrs.x, quad.control.attrs.y, quad.end.attrs.x, quad.end.attrs.y); context.setAttr('strokeStyle', 'red'); context.setAttr('lineWidth', 4); context.stroke(); // draw bezier context.beginPath(); context.moveTo(bezier.start.attrs.x, bezier.start.attrs.y); context.bezierCurveTo(bezier.control1.attrs.x, bezier.control1.attrs.y, bezier.control2.attrs.x, bezier.control2.attrs.y, bezier.end.attrs.x, bezier.end.attrs.y); context.setAttr('strokeStyle', 'blue'); context.setAttr('lineWidth', 4); context.stroke(); } window.onload = function() { var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); anchorLayer = new Kinetic.Layer(); lineLayer = new Kinetic.Layer; // curveLayer just contains a canvas which is drawn // onto with the existing canvas API curveLayer = new Kinetic.Layer(); var quadLine = new Kinetic.Line({ dashArray: [10, 10, 0, 10], strokeWidth: 3, stroke: 'black', lineCap: 'round', id: 'quadLine', opacity: 0.3, points: [0, 0] }); var bezierLine = new Kinetic.Line({ dashArray: [10, 10, 0, 10], strokeWidth: 3, stroke: 'black', lineCap: 'round', id: 'bezierLine', opacity: 0.3, points: [0, 0] }); // add dotted line connectors lineLayer.add(quadLine); lineLayer.add(bezierLine); quad = { start: buildAnchor(60, 30), control: buildAnchor(240, 110), end: buildAnchor(80, 160) }; bezier = { start: buildAnchor(280, 20), control1: buildAnchor(530, 40), control2: buildAnchor(480, 150), end: buildAnchor(300, 150) }; // keep curves insync with the lines anchorLayer.on('beforeDraw', function() { drawCurves(); updateDottedLines(); }); stage.add(curveLayer); stage.add(lineLayer); stage.add(anchorLayer); drawCurves(); updateDottedLines(); }; </script> </head> <body onmousedown="return false;"> <div id="container"></div> </body></html>
0 0
- 使用KineticJS HTML5画布修改曲线锚点
- 使用KineticJS HTML5画布修改曲线锚点
- HTML5画布kineticjs教程
- HTML5画布kineticjs倒像
- HTML5画布裁剪功能kineticjs
- HTML5画布kineticjs BLOB教程
- HTML5画布kineticjs花键教程
- HTML5画布交互散点图20000节点使用kineticjs
- HTML5画布kineticjs灰度图像教程
- HTML5画布kineticjs模糊滤镜教程
- HTML5画布kineticjs路径文字教程
- HTML5画布kineticjs习惯打功能教程
- HTML5画布的形状与kineticjs缓存
- HTML5画布更广泛的KineticJS函数
- HTML5画布与KineticJS拖放一组
- HTML5画布形状与KineticJS分层
- HTML5画布阶段数据与KineticJS URL
- HTML5画布形状与KineticJS事件
- Linux内核模块自动加载机制
- Get the metadata value using client object model from the sharepoint 2010
- 宽字符测试
- 5种很牛的两位数乘法速算方法
- C# WinForm如何实现,链接到新网页的方法
- 使用KineticJS HTML5画布修改曲线锚点
- 黑马程序员——单例设计模式
- [分享] C++ How to Program, 8/E (C++大学教程 第8版) 英文版PDF下载
- 学习ruby
- Kafka0.8.0集群构建
- HTML5画布形状与KineticJS分层
- 实现互联网思维的“独孤九剑”
- MFC工具栏设计
- 1017装箱问题