Create a rectangle with mousedown event in KineticJS(在 KineticJS 中创建一个带有 mousedown 事件的矩形)
本文介绍了在 KineticJS 中创建一个带有 mousedown 事件的矩形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用带有 mousedown 和拖动事件的 KineticJS 创建一个矩形形状,但运气不佳.有没有人做过类似的事情?
I am trying to create a rectangle shape using KineticJS with mousedown and drag events but not having much luck with it. Has anyone done anything similar?
推荐答案
http://jsfiddle.net/AYHSM/6/
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 400
});
var layer = new Kinetic.Layer();
layer.add(new Kinetic.Rect({
x:0,
y:0,
width:600,
height:400
})); // this rect will allow us to use mouse events on the layer. There's probably a better way to do this, but I don't know it.
stage.add(layer);
var rect, down = false; // down is a flag to know whether or not the mouse button is down so that we only resize the new rect when it is down.
layer.on("mousedown", function(e) {
down = true;
var r = Math.round(Math.random()*255),
g = Math.round(Math.random()*255),
b = Math.round(Math.random()*255);
rect = new Kinetic.Rect({
x: e.layerX,
y: e.layerY,
width: 11,
height: 1,
fill: 'rgb('+r+','+g+','+b+')',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
});
layer.on("mousemove", function(e) {
if (!down) return;
var p = rect.attrs;
rect.setWidth(e.layerX - p.x);
rect.setHeight(e.layerY - p.y);
layer.draw();
});
layer.on("mouseup", function(e) {
down = false;
});
这篇关于在 KineticJS 中创建一个带有 mousedown 事件的矩形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:在 KineticJS 中创建一个带有 mousedown 事件的矩形
基础教程推荐
猜你喜欢
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01