- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个简单的 Konva 设置,包括图层、矩形和文本。
Canvas 随着窗口大小的调整而缩放。我的目标是在拖动时将文本包含在 Canvas 中。目前,它适用于左边界和上边界,但不适用于下边界和右边界。
我在这里做错了什么?
https://media.giphy.com/media/fBG0OGhFPwiHUOeGSJ/giphy.gif
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import Konva from "konva";
import { Stage, Layer, Text, Rect } from "react-konva";
const CANVAS_INNER_PADDING = 5;
const Container = styled.div`
width: 50vw;
height: 50vw;
background-color: lightgray;
`;
class Canvas extends React.Component {
constructor(props) {
super(props);
this.container = React.createRef();
this.rect = React.createRef();
window.addEventListener("resize", this.updateCanvasDimensions);
this.state = {
text: {
value: "hello",
x: CANVAS_INNER_PADDING,
y: CANVAS_INNER_PADDING
},
canvas: {
width: 0,
height: 0,
color: "red"
}
};
}
componentDidMount() {
this.updateCanvasDimensions();
}
updateCanvasDimensions = () => {
const height = this.container.current.clientHeight;
const width = this.container.current.clientWidth;
this.setState({
canvas: { ...this.state.canvas, height, width }
});
};
handleDragMove = e => {
const { canvas } = this.state;
const newX = e.target.x();
const newY = e.target.y();
let newerX = newX;
let newerY = newY;
if (newX < CANVAS_INNER_PADDING) {
newerX = CANVAS_INNER_PADDING;
}
if (newX > canvas.width - CANVAS_INNER_PADDING) {
newerX = canvas.width - CANVAS_INNER_PADDING;
}
if (newY < CANVAS_INNER_PADDING) {
newerY = CANVAS_INNER_PADDING;
}
if (newY > canvas.height - CANVAS_INNER_PADDING) {
newerY = canvas.height - CANVAS_INNER_PADDING;
}
this.setState({
text: { ...this.state.text, x: newerX, y: newerY }
});
};
handleDragEnd = e => {
const newX = e.target.x();
const newY = e.target.y();
this.setState({
text: { ...this.state.text, x: newX, y: newY }
});
};
render() {
const { text, canvas } = this.state;
return (
// Have to use `innerRef` with Styled Components.
<Container innerRef={this.container}>
<Stage height={canvas.height} width={canvas.width}>
<Layer>
<Rect
ref={this.rect}
x={0}
y={0}
height={canvas.height}
width={canvas.width}
fill={canvas.color}
/>
<Text
ref={this.text}
draggable
onDragMove={this.handleDragMove}
onDragEnd={this.handleDragEnd}
text={`${canvas.height}, ${canvas.width}`}
fill="black"
x={text.x}
y={text.y}
/>
</Layer>
</Stage>
</Container>
);
}
}
const mapStateToProps = state => ({
text: state.printState.text,
canvas: state.printState.canvas
});
const rootElement = document.getElementById("root");
ReactDOM.render(<Canvas />, rootElement);
最佳答案
似乎已经解决了,我没有考虑文本的高度/宽度:
const { canvas } = this.props;
const { textHeight, textWidth } = this.text.current;
const newX = e.target.x();
const newY = e.target.y();
let newerX = newX;
let newerY = newY;
if (newX < CANVAS_INNER_PADDING) {
newerX = CANVAS_INNER_PADDING;
}
if (newX + textWidth > canvas.width - CANVAS_INNER_PADDING) {
newerX = canvas.width - CANVAS_INNER_PADDING - textWidth;
}
if (newY < CANVAS_INNER_PADDING) {
newerY = CANVAS_INNER_PADDING;
}
if (newY + textHeight > canvas.height - CANVAS_INNER_PADDING) {
newerY = canvas.height - CANVAS_INNER_PADDING - textHeight;
}
关于javascript - Konva 文字边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51747021/
我正在尝试通过一个名为react-konva的包来学习如何在react中使用 Canvas 。 npm 安装非常简单,我添加了一些可以运行的演示代码... // in MainComponent.js
我在我的项目中使用 Konva.js,我特别需要在使用 Konva.Rect() 类定义的可拖动矩形内定义文本。有没有一种方法可以在不使用单独的 Konva.Text 的情况下实现这一点() 或 Ko
以下是来自 Konvajs 的示例加载图像的库: var imageObj = new Image(); imageObj.onload = function() { var yoda = new
我正在努力处理一个小项目,我想在其中添加不同的插槽并保存在数据库中。 一切都按预期正常工作,我将 json 保存在数据库中并在编辑页面上再次调用。 Problem is the rectangles
安装和导入 Konva 和 react-konva 后,我的 jest@enzyme 测试无法运行并出现以下错误: ● 测试套件无法运行 Jest encountered an unexpected
如何序列化和反序列化自定义 Konva Shape? Konva 允许您使用sceneFunc 创建自定义形状,但是当您将其存储为JSON 并加载回来时,您怎么知道它是什么自定义形状? 最佳答案 要定
我正在尝试使用 React-Konva 库实现一个操纵杆,该操纵杆可用于控制 React.JS 中的机器人之类的东西。到目前为止,我已经设法通过在较大的圆圈内绘制一个较小的圆圈并让较小的圆圈在鼠标按下
这个问题是针对命运之轮的例子的。作为 javascript 的新手,我已经设法更改了楔形的数量、它们的颜色和标签,但我无法弄清楚将函数绑定(bind)到旋转动画的结束事件。这将是一个关于冒险行为的小型
我正在使用 Konva 在网页上创建一个区域。我为我的矩形创建一个 DragBoundFunc 函数,检查 pos.x 和 pos.y 以及 Canvas 和矩形的宽度,这工作正常 - 矩形仅在拖动时
我正在使用 Vue.js 的 Konva 包装器开发类似于甘特图的东西。我基本上有一个包含矩形的组(以及在这种情况下不相关的一些其他元素)。该组是可拖动的,如果该组在拖动时与另一个组重叠,我想更改矩形
我有一个网络,我想用 Konva (以及 React-konva 绑定(bind))绘制。当位置更新时,我希望将网络中的节点设置为新位置的动画,同时设置连接它们的链接的开始和结束位置的动画。 我从以下
我试图清除每个圆圈和线条的图层(将其完全删除),但将图像保留在背景中。 如果我使用layer.clear(),它也会删除图像。 问题:如何清除图层但避免删除图像? https://codesandbo
我在 Konva 中有两个可拖动的矩形,取自 tutorial . 我的目标是让红色(不可拖动)矩形始终位于蓝色可拖动矩形的平均位置。 我尝试从教程代码中更改它: box1.on('mouseover
我正在尝试为我的道路绘制一 strip 有 2 条线的分隔符。我已经尝试过只用 2 条平行线来制作它,但是当我制作我的道路曲线时,它看起来不太好。像这样: 小曲线: 大曲线: 因为它现在我只是在黑色背
我在形状层之上有一个透明的拖动层。非常适合使交互与众不同,因此我可以切换拖动的功能(在 ScrollView 或编辑形状位置之间)。但是,除非我关闭拖动模式(通过隐藏介入的透明 Rect),否则其他鼠
我有一个简单的 Konva 设置,包括图层、矩形和文本。 Canvas 随着窗口大小的调整而缩放。我的目标是在拖动时将文本包含在 Canvas 中。目前,它适用于左边界和上边界,但不适用于下边界和右边
我正在尝试使用 React 和 konva 构建一个图像裁剪工具。我想更改裁剪矩形外的不透明度以模糊图像的其余部分。 到目前为止,我已经尝试为矩形和图像设置不同的不透明度,但失败了。我查了一下,没有直
我正在尝试开始使用 konva、react-konva 构建 React 应用程序。 我构建了一个基本的 React 组件: import React, { Component } from "rea
我想拖动 Konva 图层,即使它是空的。我发现我只能拖动对象所在的图层(代码显示您可以拖动矩形所在的位置,但不能拖动其他位置)。 如何拖动图层拖动空部分? 此外,我发现如果您不在图层的对象之外,则
我正在尝试制作一个应用程序,您可以在其中绘制自定义矩形形状对象,并能够同时拖动舞台。 Konva.js 可以吗? var stage = new Konva.Stage({ container
我是一名优秀的程序员,十分优秀!