我有取自的JavaScript/JQuery代码
当我使用1.5.2版本的JQuery时,这段代码工作得非常好。但当我使用最新版本的JQuery (1.9.1)时,此代码无法工作。需要对此代码进行哪些更改才能在最新的JQuery中工作。
正如您所看到的,Jquery 1.5.2可以工作,但不能使用1.9.1。
var canvas, ctx;
var circles = [];
var selectedCircle;
var hoveredCircle;
// -------------------------------------------------------------
/
我有一个使用拖放的HTML5应用程序。本质上,用户可以将图像从“抽屉”拖到画布上以创建更大的图像。我要这些元素落在他们被释放的地方。除了Firefox之外,我在所有的浏览器中都能正常工作。
在drop事件中,我使用以下代码来获取鼠标的坐标,并计算画布中拖放图像的位置。
var top = evt.originalEvent.offsetX;
var left = evt.originalEvent.offsetY;
问题是,此属性在FF中不可用。有没有其他方法可以得到这个?如果没有它,我就看不到如何在FF中拖动和移动元素。
注意:我没有使用canvas元素。我正在将图像拖放到div中。不确定这
我有一个简单的canvas测试,但我似乎不能让它在Firefox上工作。我在JS控制台上真的没有收到任何错误。版本是17.0.4,稍后将在更新的版本上尝试。代码如下:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT>
var paint = false;
var canvas;
var cntxt;
var top;
var left;
function initialise() {
canvas = document.getElementById("canvas_1");
canva
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script lan
此构造允许用户在html5画布上绘图。在移动Safari和Chrome等其他浏览器上,.preventDefault()和.stopPropagation()在将手指移到画布上时成功地取消了任何滚动。然而,移动IE仍然滚动,使它不可能绘制。
有办法取消滚动吗?
startDrawing: function(e) {
var me = this;
if (!me.isLocked) {
e.preventDefault();
e.stopPropagation();
me.isDrawing = true;
m
我正在对canvas元素做一些工作,需要跟踪鼠标来突出显示它的某些部分。
我希望能够获得相对于左上角元素的位置,0,0。我有这个-使用jQuery:
...
var pos = $(this).position();
var left = e.clientX - position.left;
var top = e.clientY - position.top;
...
首先是一个jQuery应用程序接口,它将为我做上面的事情,其次,当窗口被向上/向下滚动时,它会失败,因为画布比实际的浏览器窗口大得多,所以有没有一个考虑到这一点的api。
蒂娅。
我需要用NODEJS创建一个像画布一样的画布。我成功地创建了。但是,我对坐标有个问题。它在Safari和Chrome (MAC OSX)上运行良好。但当我用Firefox测试它时,“X”和“Y”坐标稍微移动了一点。就像X和Y中的50px。我留下了代码,有什么想法吗?
$('canvas').live('drag dragstart dragend', function(e) {
//Color
var color = '#000000';
var offset, type, x, y;
type = e.
我正在使用javascript在汽车图像上绘制括号,当页面上只有一个canvas元素时,它工作得很好,但当我向页面添加任何其他内容(比如表单)时,它拒绝进行笔划。tool.init_x和tool.final_y都还在设置中,并且工作正常,只是没有被划线。
if(window.addEventListener) {
window.addEventListener('load', function () {
var canvas, context, tool;
function init () {
// Find the canva
在最新版本的Fabric JS中,图像删除功能不像预期的那样工作。
function handleDrop(e) {
e.preventDefault();
// this / e.target is current target element.
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
var obj = document.querySelect
我想替换下面的事件管理,从按键代码到鼠标。我该怎么做呢?
目前支持的浏览器= FF 3.6x。
// this block of code needs to be replaced
$(document).keydown(function(e) {
//console.log(e.keyCode);
switch(e.keyCode) {
case 38: // down
draw(x,y--);
break;
case 40: // up
draw(x,y++);
break;
case 37: // left
draw(x--,y);
break;
case 39: // right
dr
我编写了一些简单的代码来改变封面图像的不透明度,在it.there下显示隐藏的图像是两个画布,其中一个在other.both上是500x500。这两个画布都有一个image.Here,用于改变鼠标移动事件中封面图像的不透明度,这样隐藏的图像就可以被可视化。i可以使用e.layerX/Y来获取坐标。
function change_opacity(e){
if(checked){
var imageData=ctx2.getImageData(e.layerX,e.layerY,10,10);
for(i=3;i<imageData.data.length;i+=4){
var canvas = new fabric.Canvas('canvas', {width: 400, height: 400});
canvas.on('object:scaled', function (e) {
let type = e.target.get('type');
if (type == 'group') {
var triangleCount = 0, triangles = [];
//console.log(e.ta
我正在尝试将一个函数作为firefox附加组件的一部分来实现,其中包含canvas,它可以让用户具有绘图的能力。
function draw(event,context,drawit) {
var drawx = event.layerX;
var drawy = event.layerY;
if (!drawit) {
context.beginPath();
context.strokeStyle='rgb(0,255,0)';
context.lineWidth=1;
context.moveTo(draw
当使用overflow: scroll到达div元素的内容末尾时,我正在尝试获取新数据。
我一直在寻找这方面的一个例子,但没有成功。我研究过MDN并找到了事件,在事件中我找到了属性。
我认为可能有效的方法如下。在向下滚动时,如果LayerY属性的值重复n次,则它位于内容的末尾,因此我调用资源。
例如
let repeat = 0;
let value = 0;
const div = document.querySelector('div');
div.addEventListener('wheel', wheelHandler);
function
我在监听touchevents,当我用pageX/layerY调整layerX/layerY值时,从我的触摸(我的手指)看,这个点显示在圆圈的顶端,而不是中间。
//pageX = 310, layerX = -9. This is exactly in the middle of the touch circle horizontally
touchEvent.changedTouches[0].pageX + touchEvent.layerX
//pageY = 90, layerY = -34. This is exactly at the top of the touch circ