具有两个锚点的直线
Line with two anchor points kineticjs
本文关键字:两个 更新时间:2023-09-26
这是我的当前状态:http://jsfiddle.net/andrewgable/Xr6mc/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var lineLayer = new Kinetic.Layer();
var flowerLayer = new Kinetic.Layer();
var centerLayer = new Kinetic.Layer();
var flower = new Kinetic.Group({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2
});
// build stem
var stem = new Kinetic.Line({
strokeWidth: 10,
stroke: 'green',
points: [{
x: flower.getX(),
y: flower.getY()
}, {
x: stage.getWidth() / 2,
y: stage.getHeight() + 10
}]
});
// build center
var center = new Kinetic.Circle({
x: 0,
y: 0,
radius: 6,
fill: 'black',
draggable: true,
x: stage.getWidth() / 2,
y: stage.getHeight() / 2
});
center.on('mouseover', function() {
this.setFill('orange');
flowerLayer.draw();
document.body.style.cursor = 'pointer';
});
center.on('mouseout', function() {
this.setFill('black');
flowerLayer.draw();
document.body.style.cursor = 'default';
});
stage.on('mouseup', function() {
document.body.style.cursor = 'default';
});
lineLayer.add(stem);
flowerLayer.add(flower);
centerLayer.add(center);
stage.add(lineLayer);
stage.add(flowerLayer);
stage.add(centerLayer);
// keep step and flower position in sync with center
center.on('dragstart', (function() {
center.getLayer().afterDraw(function() {
stem.attrs.points[0] = center.getPosition();
flower.setPosition(center.getPosition());
lineLayer.draw();
flowerLayer.draw();
});
}));
</script>
</body>
</html>
只是想让这条线可拖动(简单,设置为拖动)。
我希望这条线有两个锚点,两个锚点都可以向任何方向拖动。
正如你所看到的,我只做了一个"锚"点。
如果没有锚点移动,我想不出这是可能的逻辑。
谢谢你的帮助。
看看http://jsfiddle.net/bxGMw/
同样的逻辑可以从这个页面复制到你想要的地方。您可以使用buildAnchors函数为形状创建锚,并使用更新函数redraw();
function buildAnchor(layer, x, y) {
var anchor = new Kinetic.Circle({
x: x,
y: y,
radius: 8,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
draggable: true
});
// add hover styling
anchor.on('mouseover', function() {
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
document.body.style.cursor = 'default';
this.setStrokeWidth(2);
layer.draw();
});
layer.add(anchor);
return anchor;
}
将此代码放在末尾,并删除group1
的代码
stem.on('dragmove', (function () {
// stem.getLayer().afterDraw(function () {
center.setPosition([stem.getPosition().x + stem.getPoints()[0].x, stem.getPosition().y + stem.getPoints()[0].y]);
c2.setPosition([stem.getPosition().x + stem.getPoints()[1].x, stem.getPosition().y + stem.getPoints()[1].y]);
flower.setPosition(center.getPosition());
lineLayer.draw();
centerLayer.draw();
flowerLayer.draw();
// });
}));
var c2 = new Kinetic.Circle({
x: 100,
y: 100,
radius: 6,
fill: 'blue',
draggable: true,
});
centerLayer.add(c2);
c2.on('dragstart', (function () {
c2.getLayer().afterDraw(function () {
stem.attrs.points[1].x = c2.getX()-stem.getX();
stem.attrs.points[1].y = c2.getY()-stem.getY();
lineLayer.draw();
flowerLayer.draw();
});
}));
也发生了变化:
center.on('dragstart', (function () {
center.getLayer().afterDraw(function () {
stem.attrs.points[0].x = center.getX()-stem.getX();
stem.attrs.points[0].y = center.getY()-stem.getY();
flower.setPosition(center.getPosition());
lineLayer.draw();
flowerLayer.draw();
});
}));
相关文章:
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 单击时切换两个图像
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 基于两个条件退出While循环
- 如何在这里将两个值最低的数字相加
- 组合两个javascript函数
- 如何使用offer/answer交换来自两个对等连接的流
- jsf中两个字符串的颜色代码差异
- 加载两个具有相同父密钥名称的json文件
- 在Qualtrics中,介绍如何动态连接两个滑块
- 访问$.ajax()函数中的两个不同数组
- 如何在three.js上添加两个向量
- 如何在datetimepicker中使用两个验证器
- 如何在javascript中获取两个日期之间的周六和周日的日期
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- javascript函数,它接受两个输入:一个对象和一个键,并返回对象中该键的相应值
- 这两个关于 JavaScript 作用域链的例子有什么区别?