Рисование круга с помощью кинетических js -- javascript поле с участием html поле с участием kineticjs пол Связанный проблема

Drawing a circle using Kinetic Js


3
vote

проблема

русский

Я пытаюсь построить очень базовую покраску, используя каркас kinetic JS. Все все идут хорошо, пока не попытался включить функцию формы, которая позволяет пользователю щелкнуть на сцене, чтобы указать точки центральных кругов, перетаскивайте и отпустите мышь для расчета радиуса, затем пропустите переменные в конструктор и выводят форму. < / P >.

Код, который у меня есть, кажется, работает хорошо, и я печатал объект круга к консоли, и это переменные - это то, что я ожидаю, что они будут, но по какой-то причине это не появляется на моем сцене!

ниже мой весь код. Методы, касающиеся круга, находятся в нижней части. Кто-нибудь может посмотреть, почему он не появляется на сцене?!

 <код>  <script src="kinetic-v4.0.4.js"></script> <script src="utils.js"></script> <script>      //variables     var stage;     var canvas;     var context;     var mouse;     var startX, startY, endX, endY;     var rad;     var dx, dy;      //run when the page is loaded     function init(){          //Create a stage object         stage = new Kinetic.Stage({             container: 'canvas',             height: 400,             width: 400,             draggable: true,             });          //References         //get references to elements within the body         canvas = document.getElementById("canvas");         context = canvas.getContext("2d");          //Capture the coordinates of the mouse in relation to the canvas         mouse = utils.captureMouse(canvas);          //Add listener to stage.         stage.getContainer().addEventListener("mousedown", mouseDown, false);     }      function mouseDown(){         console.log("mousedown");         stage.getContainer().addEventListener("mousemove", mouseMove, false);         context.beginPath();     }      function mouseMove(){         console.log("mousemove");         stage.getContainer().addEventListener("mouseup", mouseUp, false);         context.lineTo(mouse.x, mouse.y);         context.stroke();     }      function mouseUp(){         console.log("mouseup");         stage.getContainer().removeEventListener("mousemove", mouseMove, false);         context.closePath();     }      function circle(){         //add listeners.         stage.getContainer().addEventListener("mousedown", getCircleStart, false);     }      function getCircleStart(){         startX = mouse.x;         startY = mouse.y;         console.log("START POINTS: X: " + startX + " " + "Y: " + startY);         stage.getContainer().addEventListener("mouseup", getCircleEnd, false);     }      function getCircleEnd(){         endX = mouse.x;         endY = mouse.y;         console.log("END POINTS: X: " + endX + " " + "Y: " + endY);         dx = endX - startX;         dy = endY - startY;         console.log(dx + " " + dy);         rad = Math.pow(dx, 2) + Math.pow(dy, 2);         rad = Math.sqrt(rad);         console.log("radius: " + rad);          //create layer for circle         var layer = new Kinetic.Layer();          //draw circle         var circle = new Kinetic.Circle({             x: startX,             y: startY,             radius: rad,             fill: 'red',             stroke: 'black',             strokeWidth: 4,             visible: true             });          //add to layer         layer.add(circle);         //add layer to stage         stage.add(layer);          console.log(circle);     }   

JavaScript Console

utils.js - & gt; http://paulirish.com/2011/requestanimationframe-for-smart-animation/ / a>

Английский оригинал

I'm trying to build a very basic painting application using the kinetic js framework. All was going well up until I tried to incorporate a shape function that allows the user to click on the stage to specify a circles center points, drag and release the mouse to calculate radius then pass the variables into a constructor and output the shape.

The code I have seems to be running alright and I printed the circle object to the console and it's variables are what I expect them to be but for some reason it does not appear on my stage!

Below is my entire code. The methods concerning the circle are towards the bottom. Can anyone see why it is not appearing on the stage?!

 <script src="kinetic-v4.0.4.js"></script> <script src="utils.js"></script> <script>      //variables     var stage;     var canvas;     var context;     var mouse;     var startX, startY, endX, endY;     var rad;     var dx, dy;      //run when the page is loaded     function init(){          //Create a stage object         stage = new Kinetic.Stage({             container: 'canvas',             height: 400,             width: 400,             draggable: true,             });          //References         //get references to elements within the body         canvas = document.getElementById("canvas");         context = canvas.getContext("2d");          //Capture the coordinates of the mouse in relation to the canvas         mouse = utils.captureMouse(canvas);          //Add listener to stage.         stage.getContainer().addEventListener("mousedown", mouseDown, false);     }      function mouseDown(){         console.log("mousedown");         stage.getContainer().addEventListener("mousemove", mouseMove, false);         context.beginPath();     }      function mouseMove(){         console.log("mousemove");         stage.getContainer().addEventListener("mouseup", mouseUp, false);         context.lineTo(mouse.x, mouse.y);         context.stroke();     }      function mouseUp(){         console.log("mouseup");         stage.getContainer().removeEventListener("mousemove", mouseMove, false);         context.closePath();     }      function circle(){         //add listeners.         stage.getContainer().addEventListener("mousedown", getCircleStart, false);     }      function getCircleStart(){         startX = mouse.x;         startY = mouse.y;         console.log("START POINTS: X: " + startX + " " + "Y: " + startY);         stage.getContainer().addEventListener("mouseup", getCircleEnd, false);     }      function getCircleEnd(){         endX = mouse.x;         endY = mouse.y;         console.log("END POINTS: X: " + endX + " " + "Y: " + endY);         dx = endX - startX;         dy = endY - startY;         console.log(dx + " " + dy);         rad = Math.pow(dx, 2) + Math.pow(dy, 2);         rad = Math.sqrt(rad);         console.log("radius: " + rad);          //create layer for circle         var layer = new Kinetic.Layer();          //draw circle         var circle = new Kinetic.Circle({             x: startX,             y: startY,             radius: rad,             fill: 'red',             stroke: 'black',             strokeWidth: 4,             visible: true             });          //add to layer         layer.add(circle);         //add layer to stage         stage.add(layer);          console.log(circle);     } 

Javascript Console

utils.js -> http://paulirish.com/2011/requestanimationframe-for-smart-animating/

</div
        

Список ответов

1
 
vote

Попробуйте добавить этот код: <код> circle.getParent().draw() Это может исправить вашу проблему.

 

Try adding this code:circle.getParent().draw() That might fix your problem.

</div
 
 
0
 
vote

jsfiddle было бы здорово, но с первого взгляда похоже, что вы не перерезаете свой слой, когда вы добавляете форму к нему. Попробуйте позвонить Sayer.Draw () в нижней части метода getCircleend.

 

A JSFiddle would be nice, but at a glance it looks like you aren't redrawing your layer when you add the shape to it. Try calling layer.draw() at the bottom of the getCircleEnd method.

</div
 
 
         
         

Связанный проблема

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

12  Синтаксисная ошибка в видом на бритву при прохождении свойств модели в качестве параметров на функцию JavaScript  ( Syntax error in razor view when passing model properties as parameters to javasc ) 
Я получаю <код> Syntax error на каждой запятой (<код> , ) и на последнем кронштейне (<код> ) ) в следующем коде: <код> <script type="text/javascript"> ...

21  Angularjs NG-модель внутри NG-Repeat имеет плохую производительность  ( Angularjs ng model inside ng repeat has poor performance ) 
У меня проблема с производительностью с угловой в следующем сценарии: <код> <div ng-repeat="a in array"> <input ng-model="something"> </div> Я писал к...

2  Как получить выделенные тексты?  ( How to get the highlighted texts ) 
Я пытаюсь получить выбранные тексты от пользователя (выделенный текст, который выделяет пользователь). У меня есть следующее: <код> function getSelectedTe...

3  Angularjs: Как активировать первый ненулевой элемент в Ngrepeat?  ( Angularjs how to activate first non zero item in ngrepeat ) 
для объекта, такого как <код> notification: { "text":0, "image":2, "video":0 } У меня есть <код> ng-repeat ввиду <код> <div ng-repeat="items...

2  Совет инструмента не работает на текстовой зоне Bootstrap  ( Tool tip not working on text area bootstrap ) 
У меня есть форма Bootstrap 3, на которой я применяю Tootip через скрипт. Toottip работает нормально на поле ввода, но не работает над Textarea. <код> <div ...

0  Нужен React Router Pro, чтобы помочь мне  ( Need a react router pro to help me ) 
Итак, сегодня я играл с маршрутизатором RACT и попытался изменить это Пример . Я хочу достичь этого: . Боковой NAV отображает только имена Когда пол...

0  Попытка вернуть массив объектов для просмотра, получить «10 $ digest () итераций  ( Trying to return array of objects to view get 10 digest iterations reached ) 
Я пытаюсь создать токенизатор, где пользователь вводится в форматную строку, а пользовательский интерфейс дает им предварительный просмотр анализатора. Когда ...

0  Ошибка прокладывания слайдера jQuery: ... не удалось конвертировать аргумент JavaScript ARG 0 [NSIDOMHTMLanChorElement.appendChild]  ( Jquery slider throwing error could not convert javascript argument arg 0 ns ) 
Наш сайт Dev Dev имеет ползунок отлично работает здесь: http://allblacks.01dev.co.nz/index.cfm layout = dnahome Однако мы просто поставили сайт Live, и ...

183  Вертикально центрирующее модальное окно Bootstrap  ( Vertically centering bootstrap modal window ) 
Я хотел бы центрировать мою модаль на ViewPort (Middle), я пытался добавить некоторые свойства CSS <код> .modal { position: fixed; top:50%; left:50%; } ...

1  Обработка ошибок METEOR для шаблона именования ошибок опечатки  ( Meteor error handling for template naming typo errors ) 
Недавно у меня была ошибка с именем, используемым в файле помощников. Поскольку используемое имя шаблона было недействительным, все мои глобальные помощники п...

1  Если для JavaScript в XSLT не работает [дубликат]  ( If greater than javascript into xslt doesnt work ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки  ( Angular js validation function returns before the api call for validation is com ) 
<код> if (!validate()) { return; }; function validate() { var nameIsValid = ...

0  Почему это работает над сафари и Firefox, но не на хроме?  ( Why is this working on safari and firefox but not on chrome ) 
У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот з...

1  jquery адрес плагин  ( Jquery address plugin issue ) 
Я использую плагин jQuery Address, я реализовал плагин на странице списка, когда я нажимаю на одну из ссылок, функция будет вытащить данные, используя AJAX и ...

Связанный проблема

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено? 
12  Синтаксисная ошибка в видом на бритву при прохождении свойств модели в качестве параметров на функцию JavaScript 
21  Angularjs NG-модель внутри NG-Repeat имеет плохую производительность 
2  Как получить выделенные тексты? 
3  Angularjs: Как активировать первый ненулевой элемент в Ngrepeat? 
2  Совет инструмента не работает на текстовой зоне Bootstrap 
0  Нужен React Router Pro, чтобы помочь мне 
0  Попытка вернуть массив объектов для просмотра, получить «10 $ digest () итераций 
0  Ошибка прокладывания слайдера jQuery: ... не удалось конвертировать аргумент JavaScript ARG 0 [NSIDOMHTMLanChorElement.appendChild] 
183  Вертикально центрирующее модальное окно Bootstrap 
1  Обработка ошибок METEOR для шаблона именования ошибок опечатки 
1  Если для JavaScript в XSLT не работает [дубликат] 
1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки 
0  Почему это работает над сафари и Firefox, но не на хроме? 
1  jquery адрес плагин