sách gpt4 ai đã đi

svg - D3 平移+缩放约束

In lại 作者:行者123 更新时间:2023-12-01 22:35:22 28 4
mua khóa gpt4 Nike

我正在尝试在平移和缩放时使可缩放/拖动矩形不超出 svg 边界。我尝试基于此 ví dụ 来实现它,但我似乎无法让它工作。我创建了 this jsfiddle只有可缩放和可拖动的矩形。再一次,我试图做到这一点,这样你就不能将矩形拖到我放置边框的 svg 框之外。我知道我需要更新移动功能。下面的代码来自第一个链接示例,但似乎效果不佳,因此我将其中的一部分注释掉了。

function move() {
var t = d3.event.translate,
s = d3.event.scale;

//t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
//t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
//zoom.translate(t);
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

编辑:所以另外我需要能够在你一直放大并且它比 svg 大时拖动矩形。在下图中,蓝色矩形是 svg,绿色是矩形,你一直放大,所以绿色矩形比 SVG 占据更多。这类似于 constrained zoom example 中的 map .您可以放大各州并拖动到全国各地,导航到当前 svg 大小以外的州

ví dụ

1 Câu trả lời

您可以通过将您设置的平移坐标限制为框的大小来做到这一点:

var t = d3.event.translate,
s = d3.event.scale;

t[0] = Math.max(0, Math.min(t[0], width - s*50));
t[1] = Math.max(0, Math.min(t[1], height - s*50));

svg.attr("transform", "translate(" + t + ")scale(" + d3.event.scale + ")");

这将 x 坐标限制在 0 和宽度减去之间,但是完全显示框需要多少空间——这取决于缩放级别,因此术语包含 S。对于y坐标,完全一样。

如果您不通过 x 为框同时使用平移和显式坐标设置,这会容易得多——从左上角偏移, 只需设置一个初始翻译。

完整示例 đây .

关于svg - D3 平移+缩放约束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21991210/

28 4 0
Bài viết được đề xuất: ios - 警告:NPT_CHECK失败
Bài viết được đề xuất: ios - WKInterfacelabel 检查是否被截断
Bài viết được đề xuất: ios - UIBezierPath 中的厚度不均匀
Bài viết được đề xuất: ios - UIViewController 中的 UISearchBar
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com