标签: konvajs

我试图摆脱我的tslint错误,Type declaration of 'any' loses type-safety.但我正在努力弄清楚事件的正确类型.

我正在尝试将Lynda" 构建和部署全栈反应应用程序 ",同时尝试将其转换为Typescript.

以下是导致此问题的具体行:

onClick={(event: any) => {
 makeMove(ownMark, event.target.index)
}}

我试图将事件声明为几种不同的类型,例如React.MouseEvent<HTMLElement>,加上HTMLElement上的一些其他子类型,但没有成功,因为target.index不是我能提出的任何类型的属性.我可以从检查器看到currentTarget是Konva.Text并且索引设置为0但不确定这对我有帮助,因为我无法将类型设置为Konva.Text,这对我来说是有意义的,但这也不起作用.

这是我完整的React功能组件:

export const Squares = ({units, coordinates, gameState, win, gameOver, yourTurn, ownMark, move}: SquaresProps) => {
  let squares = coordinates.map( (position: number, index: number) => { 
    let makeMove = move
    let mark = gameState[index] !== 'z' ? gameState[index] : false
    let fill = 'black'

    // when someone wins you want the square to turn …

KineticJS的主动维护于2014年12月由其创始人停止.曾经在kineticjs.com网站上托管的文档现在返回404.

我在哪里可以找到文档的最新版本？

我是图形新手，需要帮助了解各种 javascript 2D 库的功能。. .

• 我从 Pixi.js 中得到了什么，而我不能从基于画布的库（例如 Konva）中得到什么？
• 我从 Konva.js 中得到了什么，而我却没有从 D3.js 等 HTML/SVG/CSS 库中得到什么？

在这一点上我所理解的是 Pixi 是一个 WebGL 库，因此您可以通过 GPU 获得更快的渲染。但是，我不知道如何描述 Konva 的作用/它是如何工作的。

任何有关术语等的帮助将不胜感激！

我目前正在考虑使用KonvaJS创建一个废料预订应用程序,我试图像子弹列表一样显示.

我试图使用Text形状并在文本中添加html以查看它是否会渲染它,但没有运气.

这甚至可能吗？如果是这样,怎么样？如果没有,KonvaJS有什么其他方式来显示花哨的文本,如列表,粗体...

    var text = new Konva.Text({
      text: '<div>this is normal text\n\n <b>This is BOLD</b> </div>',
      fontSize: 8,
      fontFamily: 'Calibri',
      fill: '#555',
      width: 300,
      padding: 20,
      align: 'center',
      stroke: 'black',
      strokeEnabled: false,
      strokeWidth: 0
    });

输出:对不起,我没有足够的声誉来发布图片,但输出文字是:

<div>this is normal text

<b>This is BOLD</b> </div>

我希望它是这样的:

这是正常的文字

这是大胆的

任何帮助表示感谢,谢谢!

我想使用Konvajs来执行以下任务:

1. 在画布上绘制两个矩形组.每个组包含一个矩形,文本和一个圆圈
2. 当我使用鼠标从圆圈拖动时,它会在拖动时绘制箭头.
3. 当我将箭头拖放到另一个组时,它会停止绘制并将两个组边对边连接

像这样的东西:

是否有任何本机方法支持形状之间的连接？有人能告诉我一些例子吗？

我正在尝试构建一个 Konva Text 容器，其内容垂直居中；

var infoText = new Konva.Text({
  x: 0,
  y: 0,
  text: `my long long ... text`,
  fontSize: 18,
  fontFamily: 'Arial',
  width: 50,
  height: 50,
  align: 'center'
});

我在文档中找到了align属性，但它只能使文本水平居中。如何垂直居中？

我在我的项目中使用Konva JS.我在按钮点击上添加一个可拖动的形状.点击形状我需要获得形状的X和Y位置.getX和getY函数返回原始的X和Y.如何在拖动后更新X和Y.

示例代码如下.

 var stage = new Konva.Stage({
        container: 'canvas', // id of container <div>
        width: 500,
        height:300
    });
    
 jQuery("#add-shape").click(function(){
 addShape();
 });
 
 var addShape = function(){
 
 console.log("add shape");
 
 var layer = new Konva.Layer();
 var parentContainer = new Konva.Rect({
            x: stage.getWidth() / 2,
            y: stage.getHeight() / 2,
            width: 200,
            height: 60,
            cornerRadius: 10,
            fill: '#ccc'
        });
        
        var smallCircle = new Konva.Circle({
            x: stage.getWidth() / 2 + 200,
            y: stage.getHeight() / 2 + 30,
            radius: 15,
            fill: "#F2784B", …

您好，我试图在我的 React 项目中的 rect 上实现缩放功能，但找不到以 React 方式实现的方法？有什么帮助吗？

这是我找到的 html konva 示例：https ://konvajs.github.io/docs/sandbox/Zooming_Relative_To_Pointer.html

我正在开发一个可以使用konva绘制图形的网站,但我正在遇到这个奇怪的问题:

如果我将每个tick的单位更改为除*.5整数之外的任何值,它将变为如下所示:

这是代码:

https://codepen.io/ItsTheWolf/pen/jrdkNX

var stage, axeslayer, gridslayer, axes, grids, errTxt;
var w, h;
var linex, liney;
var centx, centy;
var maxx, maxy, miny;
var x, y;
var distx, disty;
var i, j;
var tg = 1, err = 0;
document.getElementById('togG').disabled = true; // disable button Toggle Grids

function draw() {
    getValues(); // get values from input box
    createStage(); // create stage
    validate();
    if (err === 0) {
        drawAxes(); // draw axes
        drawGrids(); // draw grids
    } else …

我已经使用 konva js 插件进行画布表示。我已经阅读了文档，但无法获得使用 konvajs 上传图像的任何帮助。

是不是我需要做自定义代码？konva js 是否支持从文件夹上传图片并保存到画布元素？

如何管理上传/存储外部图像？