个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
24
4
我正在尝试使用 Raphael.js 的内置拖动方法调整图像大小/缩放图像，但我遇到了一些奇怪的行为。
这是 jsfiddle:http://jsfiddle.net/charleshimmer/5pdyy/1/
使用右侧或右下角调整图像大小。你会看到一些奇怪的行为，它使用 scale 方法跳跃和跳跃。有人知道为什么吗？
我可以通过更新图像的宽度和高度来调整平滑大小，但宽高比会关闭。使用 image.scale，纵横比保持不变，但随后会到处跳动。
最佳答案
HTML
<html>
<head>
<title>Photo Test</title>
</head>
<body>
<div id="editor"></div>
<img id="image"
src="http://www.pyrblu.com/assets/launchpad_resources/demo.jpg"
style="display:none"
>
</body>
</html>
CSS
svg
{
border: 1px solid red;
background:#fff;
border-radius: 45px;
}
JavaScript
var Editor = {},
ctFactor = 7;
// create Raphael canvas
Editor.paper = Raphael('editor', 582, 514.8);
// wait for image to load
$("#image").load(function(){
Editor.image = Editor.paper.image("http://www.pyrblu.com/assets/launchpad_resources/demo.jpg", 25, 25, 282, 465.2);
Editor.image.drag(Editor.dragging, Editor.dragStart, Editor.dragEnd);
Editor.image.ready = true;
Editor.image.mousemove(function (e) {
// only do this if the user isn't currently moving / resizing image
if( ! this.ready){
return;
}
var side = Editor.sideDection(e, this);
// if the user's mouse is along the edge we want resize
if(side){
Editor.image.state = 'resizable';
}
// else it's towards the middle and we want to move
else{
Editor.image.state = 'movable';
}
var cursor = (side) ? side + '-resize' : 'move';
this.attr('cursor', cursor);
});
});
Editor.sideDection = function(event, ct){
// check north side
var directions = {
n: Math.abs(event.offsetY - ct.attr('y')) <= ctFactor,
s: Math.abs(event.offsetY - (ct.attr('height') + ct.attr('y'))) <= ctFactor,
e: Math.abs(event.offsetX - (ct.attr('width') + ct.attr('x'))) <= ctFactor,
w: Math.abs(event.offsetX - ct.attr('x')) <= ctFactor
},
side = '';
// loop through all 4 sides and concate the ones that are true
for(var key in directions) {
if(directions.hasOwnProperty(key)){
if(directions[key]){
side = side + key;
}
}
}
return side;
};
Editor.dragStart = function () {
console.log('at start');
// grab original x, y coords
this.ox = this.attr("x");
this.oy = this.attr("y");
// toggle user is doing something
// so other actions are blocked
this.ready = false;
this.animate({opacity: .65}, 500, ">");
};
Editor.dragging = function (dx, dy, x, y, e) {
console.log('at dragging');
if(this.state === 'movable'){
// this does the actual moving of the object
this.attr({x: this.ox + dx, y: this.oy + dy});
}
// we are resizing then
else{
var diff = (x - this.ox) - this.attr('width'),
xratio = 1 + diff / this.attr('width'),
yratio = 1 + diff / this.attr('height');
console.log('diff: ', diff, 'xratio: ', xratio, 'yratio: ', yratio);
//resize image, update both height and width to keep aspect ratio
// this.attr({
// 'width': this.attr('width') * xratio,
// 'height': this.attr('height') * yratio
// });
this.scale(xratio, xratio, 0, 0);
//console.log('h: ', this.attr('height'), 'w: ', this.attr('width'), 'r', this.attr('width') / this.attr('height'));
}
};
Editor.dragEnd = function () {
this.ready = true;
this.animate({opacity: 1}, 500, ">");
};
关于javascript - Raphael.js 拖动比例会导致奇怪的跳跃行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7297356/
24
4
0
滚动时，我的移动设备底部的固定元素出现问题。看起来每次滚动时都会重新计算高度，因为移动设备上的文档高度增加了。 我认为原因是地址栏淡出并且文档视口(viewport)变大了。我进行了很多搜索并尝试了不
以下是插入到我自己的哈希表中时进行冲突检测的方法的内部。我正在使用小的测试数字并尝试使我的逻辑正确，变量哈希设置为 0，table.length 为 10。 else {
我正在做一个大元素，之前只用过几次转换，所以我没有太多经验。这次客户对效果有很多要求。 我有一个#item，里面有一个按钮和一个透明的div。将鼠标悬停在透明 div 上的 opacity 更改为 0
我是一个十足的 Java 新手。上周一开始，之前从未用任何语言进行过任何编程。因此，如果我发现简单的事情变得复杂，请耐心等待。 我收到了一个文本文件。如下图: 第一个数据是时间(午夜过后的秒数)，第二
在 pygame 中计算重力的最佳方法是什么？我基本上只需要它，所以当玩家按下“向上”时，角色会跳跃。到目前为止，这是我的代码(只是一个带有移动的红色 block 的白色屏幕) import pyga
我用一个简单的渐变扩展了 JComponent 并调整了paintComponent()方法来制作我自己的BottomBar。 然后我将它添加到使用 BorderLayout 的 JFrame 的 S
我使用 Chart.js 渲染折线图。我不想重新调整 x 轴以获得更多样本点。 如果 y 轴值不连续变化，渲染跳跃的最佳方法是什么？ 理想情况下，我能够为每个 x 值定义两个 y 值。因此，假设我传入
我有用于左、右、上、下移动的 Sprite 的 KeyEvents。我只是在闲逛，正在考虑另一个我希望 Sprite 跳跃的项目。它不必完全现实，因为我才刚刚开始。我所拥有的是，当按下空格键时，它将导
我运行双显示器设置。 从显示器 1 到显示器 2(或反之亦然)需要大量不必要的鼠标移动。 我的想法是利用一个额外的鼠标按钮(我有两个)并让鼠标从显示器 1 上的 XY 坐标超跳(向星际迷航道歉)到显示
我有一个 slider 可以实时更新其右侧标签上的值。当值从 1 位值变为 2 位值时，我应该怎么做才能防止它“跳跃”？我怎样才能给标签一个固定的位置，这样它就不会改变布局: var range =
我在页面上使用光滑的 slider 。一切都很好，除了一件事:当我拖动幻灯片时，有时图像或文本会弹起，这看起来非常糟糕。我该怎么做才能避免这个问题？ 这是我的 code
const int jumpHeight = 10; //Non-Const variables bool running = true
我有一个 bootstrap Accordion 崩溃，它工作得很好，虽然有一件事困扰着我。当正在展开的元素很长并且做一个垂直滚动条时，它也会使整个页面向左小跳，但只要内容不大，一切都是流畅的。 有谁
我开始学习一些 SVG(我想还有 javascript)，并且我很难理解为什么这不顺利。 0 移动了少量(大概是 x 轴上水平的“1”)，但开始大幅跳跃。这是因为我使用的浏览器(Chrome)刷新/重
我想创建像飞翔的小鸟一样的游戏。我希望玩家在屏幕上连续跳跃。我创建了这段代码，它不像一只飞扬的小鸟跳跃 代码: float jump = 100; // Just example if(Gdx.inp
如下图所示，.hero div 的高度在滚动经过某个点时发生变化(Chrome、Android 6.0.1)。 这是相关的CSS .hero { height: 100%; width
当我将鼠标悬停在 li 上时，我有菜单有点摆动。如何停止摆动。 代码在这里 JSFiddle 最佳答案 摆脱它的最简单方法是像这样修改 css: .inner LI { border: 1px s
我试图让 dino 跳跃，但是当我在 dino 跳跃和下落之间使用 time.sleep(0.1) 时，整个游戏停止0.1秒。 我试过使用 time.sleep，仅此而已，因为我在网上找不到任何其他有
我正在使用 andengine 来实现一个可以使用它在屏幕上拖动的 Sprite 。 所以我想做的是当用户点击屏幕上的任何位置时使 Sprite 跳跃。 或者向上移动然后向下移动。 使用 andeng
我有一个包含 webview 的 viewflipper。在某些情况下(看似随机)，webview 的底部会出现抖动/跳跃。这可以持续一秒到几秒之间的任何时间。这是一个视频来说明我在说什么 http:
我是一名优秀的程序员,十分优秀！