How to draw a circle?

1 Answer 245 Views
Drawing
Nikolina
Top achievements
Rank 1
Nikolina asked on 29 Apr 2021, 04:07 PM | edited on 29 Apr 2021, 04:08 PM

This is a very straightforward question, and I'm sure the answer is as well, but I can't seem to figure it out. I want to be able to draw a simple shape, in this case, a circle. Here is what I did:

RenderSurface.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Surface } from '@progress/kendo-drawing';

import drawCircle from './DrawCircle';

class RenderSurface extends React.Component {
  surface;
  componentDidMount() {
    drawCircle(this.createSurface());
  }
  createSurface = () => {
    const element = ReactDOM.findDOMNode(this);

    this.surface = Surface.create(element);

    return this.surface;
  }
  render() {
    return (<div id="surface" />);
  }
}

export default RenderSurface;

 

DrawCircle.jsx

import { geometry } from '@progress/kendo-drawing';
const { Circle } = geometry;


export default function drawCircle(surface) {
  const circle = new Circle([100, 100], 80, {
    stroke: { color: "red", width: 1 },
    color: "rgb(255, 0, 0)",
  });

  surface.draw(circle);
}

 

App.js

import '@progress/kendo-theme-default/dist/all.css';
import './App.scss';
import React from 'react';
import RenderSurface from './components/RenderSurface';

function App() {
  return (
    <div className="App">
      <RenderSurface/>
    </div>
  );
}

export default App;

When I run this, I get the following error:

TypeError: _node_map__WEBPACK_IMPORTED_MODULE_4__.default[srcElement.nodeType] is not a constructor

I though it might have to do with bad import, but whatever I tried, it's always this error. What am I doing wrong?

1 Answer, 1 is accepted

Sort by
1
Accepted
Stefan
Telerik team
answered on 30 Apr 2021, 09:38 AM

Hello, Nikolina,

Thank you for the code.

There is a small difference in the syntax for the Circle:

    const geometry = new GeomCircle([ 100, 100 ], 40);
    const circle = new Circle(geometry, {
        stroke: { color: "red", width: 1 }
    });
This is an example:

https://stackblitz.com/edit/react-guo6jg?file=app/draw-scene.js

The correct syntax can be seen here:

https://www.telerik.com/kendo-react-ui/components/drawing/api/Circle/#toc-clip-1

We agree that the documentation on the drawing API can be improved as sometimes the correct approach is not straightforward.

Regards,
Stefan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Nikolina
Top achievements
Rank 1
commented on 30 Apr 2021, 02:46 PM

Hello, Stefan.

Thank you for clarifying this. Much appreciated!
Tags
Drawing
Asked by
Nikolina
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or