- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在尝试创建一个方 block 游戏,您可以在其中从菜单中选择形状并将它们放置在 Canvas 上。有一个形状菜单,您可以在其中将形状拖到 Canvas 上。我希望它在将克隆拖到 Canvas 上时将主要形状留在菜单中。这可能吗?我创建了一个 jsfiddle 来提供帮助。
window.canvas = new fabric.Canvas('fabriccanvas');
var edgedetection = 10; //pixels to snap
canvas.selection = false;
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);
canvas.renderAll();
}
// resize on init
resizeCanvas();
//Initialize Everything
init();
function init(top, left, width, height, fill) {
var bg = new fabric.Rect({
left: 0,
top: 0,
fill: "#eee",
width: window.innerWidth,
height: 75,
lockRotation: true,
maxHeight: document.getElementById("fabriccanvas").height,
maxWidth: document.getElementById("fabriccanvas").width,
selectable: false,
});
var squareBtn = new fabric.Rect({
top: 6,
left: 18,
width: 40,
height: 40,
fill: '#af3',
lockRotation: true,
originX: 'left',
originY: 'top',
cornerSize: 15,
hasRotatingPoint: false,
perPixelTargetFind: true,
});
var circleBtn = new fabric.Circle({
radius: 20,
fill: '#f55',
top: 6,
left: 105,
});
var triangleBtn = new fabric.Triangle({
width: 40,
height: 35,
fill: 'blue',
top: 10,
left: 190,
});
var sqrText = new fabric.IText("Add Square", {
fontFamily: 'Indie Flower',
fontSize: 14,
fontWeight: 'bold',
left: 6,
top: 50,
selectable: false,
});
var cirText = new fabric.IText("Add Circle", {
fontFamily: 'Indie Flower',
fontSize: 14,
fontWeight: 'bold',
left: 95,
top: 50,
selectable: false,
});
var triText = new fabric.IText("Add Triangle", {
fontFamily: 'Indie Flower',
fontSize: 14,
fontWeight: 'bold',
left: 175,
top: 50,
selectable: false,
});
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 3,
offsetX: 0,
offsetY: 2,
opacity: 0.6,
fillShadow: true,
strokeShadow: true
}
window.canvas.add(bg);
bg.setShadow(shadow);
window.canvas.add(sqrText);
window.canvas.add(cirText);
window.canvas.add(triText);
window.canvas.add(squareBtn);
window.canvas.add(circleBtn);
window.canvas.add(triangleBtn);
canvas.forEachObject(function (e) {
e.hasControls = e.hasBorders = false; //remove borders/controls
});
this.canvas.on('object:moving', function (e) {
var obj = e.target;
obj.setCoords(); //Sets corner position coordinates based on current angle, width and height
canvas.forEachObject(function (targ) {
activeObject = canvas.getActiveObject();
if (targ === activeObject) return;
if (Math.abs(activeObject.oCoords.tr.x - targ.oCoords.tl.x) < edgedetection) {
activeObject.left = targ.left - activeObject.currentWidth;
}
if (Math.abs(activeObject.oCoords.tl.x - targ.oCoords.tr.x) < edgedetection) {
activeObject.left = targ.left + targ.currentWidth;
}
if (Math.abs(activeObject.oCoords.br.y - targ.oCoords.tr.y) < edgedetection) {
activeObject.top = targ.top - activeObject.currentHeight;
}
if (Math.abs(targ.oCoords.br.y - activeObject.oCoords.tr.y) < edgedetection) {
activeObject.top = targ.top + targ.currentHeight;
}
if (activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(activeObject)) {
} else {
targ.strokeWidth = 0;
targ.stroke = false;
}
if (!activeObject.intersectsWithObject(targ)) {
activeObject.strokeWidth = 0;
activeObject.stroke = false;
activeObject === targ
}
});
});
}
最佳答案
参见 Jsfiddle在这里,我添加了执行此操作的功能。
function draggable(object) {
object.on('mousedown', function() {
var temp = this.clone();
temp.set({
hasControls: false,
hasBorders: false,
});
canvas.add(temp);
draggable(temp);
});
object.on('mouseup', function() {
// Remove an event handler
this.off('mousedown');
// Comment this will let the clone object able to be removed by drag it to menu bar
// this.off('mouseup');
// Remove the object if its position is in menu bar
if(this.top<=75) {
canvas.remove(this);
}
});
}
draggable(squareBtn);
draggable(circleBtn);
draggable(triangleBtn);
关于javascript - Fabric JS : Copy/paste object on mouse down,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28183763/
我想检测 Area2D 内的鼠标单击(并按住),然后检测 Area2D 内部或外部的鼠标释放。 这是我目前所拥有的: extends Area2D #PickArea func _input_even
鼠标上的以下按钮在哪里? 编辑: jack 回答后,我在括号中添加了位置。 mouse-1(向左按钮) mouse-2(单击车轮按钮/中间按钮) mouse-3(右键) mouse-4(振铃) mou
这是我的问题;我正在尝试显示“标记”,并在鼠标悬停/移出/单击上进行一些操作。 问题是,根本没有任何事件在over上触发,当在控制台中单击(向下)时,我收到了一些反馈,但不是每个元素的反馈说(目标==
我将从 Textmate 切换到 SublimeText 2。 在 TextMate 中,只需单击行号即可用鼠标为该行添加书签。我这样做已经很多年了,虽然我确信有些人可能更喜欢键盘快捷键,但我不是其中
如何在JavaScript中获取“mouse key up”的按键代码? 如果我按下鼠标左键,那么键码就是一个。 我想在 onmousekeyup 时触发一些代码。但是只要鼠标按下键,这段代码就不会触
我想要实现的是,我想让它像星级评定一样工作。当你进入鼠标时,星星变成黄色,当你离开鼠标时,它变成灰色,然后如果你再次点击它变成黄色。 不知道如何实现它,我添加了代码来向您展示我到目前为止所做的尝试。
我刚刚发现:set mouse=a .令人惊奇的是,它允许我的同事滚动浏览我的 openend 文件。 但事情是这样的:当我左键单击某处时,我真的不希望光标移动。我不想要 :set mouse=a 的
我正在使用官方 highcharts 包装器进行 react 以生成甘特图。我试图从鼠标悬停事件中获取鼠标坐标并将其用于自定义工具提示,但坐标不精确。 例子: https://stackblitz.c
我在 reactjs 上创建了一个简单的组件(一种值选择器:plunker) 现在,我希望隐藏控件的上部和下部 (opacity=0) 并在用户将鼠标悬停在中央 时动画化为 opacity=1 >di
我正在编写一个测试,它在Cuprite::Ferrum上运行,我需要在其中单击一个元素,并将其拖放到页面上另一个元素的下方。当我手动操作时,它工作得很好,但当我尝试将其放在测试中时,它几乎可以工作,但
I want to record mouse and keyboard simultaneously and replay them later. When MIDDLE MOUSE is pr
我为 3d 射击游戏添加了主要用户对象,为其附加了摄像头,并试图在脚本代码中捕捉鼠标移动,附加到玩家游戏对象。但是不能使用Input.GetAxis("Mouse X")、Input.GetAxis(
我是 Unity 脚本的新手,我正在尝试制作 ThirdPersonCamera,所以关注 this tutorial他可以正确上下左右移动鼠标 使用的脚本是 posY += Input.GetAxi
Fotorama slider : slider 设置为 Autoplay="true",效果很好。如何让 slider 在鼠标悬停时暂停,然后在鼠标移开时恢复自动播放?这是我的代码: 最佳答案 v
我在 Windows 窗体中有一个 TreeView 。当我左键单击 TreeView 中的一个节点时,e.Node 显示正确的值,但是当我右键单击同一节点时,e.Node 在 trreview Af
是涉及到寄存器还是缓存内存相关? 我的问题的说明性示例可能很简单,我将鼠标移过我当前正在输入的屏幕。我不点击任何东西,我只是将箭头从左到右、上下移动。 CPU 如何处理鼠标相对于显示器显示的瞬时位置变
用户可以使用一个非常简单的工具(在按住 LMB 的同时移动鼠标)在我的应用程序中绘制草图。这会导致一系列 mousemove 事件,我会在每个事件中记录光标位置。生成的折线曲线往往相当密集,几乎每隔一
我有一些新手问题。 在我的应用程序 (processingjs) 中,我使用 scale() 和 translate() 来允许用户缩放和滚动场景。只要我将比例设置为 1.0,我就没有问题。但是每当我
我正在寻找一个在 XP/Vista/7 中工作的全局鼠标钩子(Hook),它允许我访问鼠标输入的 X、Y 值,并在它们到达 Windows 之前修改这些值...... 我还希望能够在实际鼠标输入之间模
我正在使用mousejoint来拖动box2d中的物体,但这会导致惯性延迟。 是否存在即时拖动 body 的任何方式? 最佳答案 解决方案是在b2MouseJointDef中调整属性frequency
我是一名优秀的程序员,十分优秀!