MC-XOBAHCK,
Насчет вращения: Перед и после строки 35 впишите Код:
strelka.translate(x,y); |
Dilettante_Pro, СПАСИБО! Код поправил. Теперь при повороте без смещения.
Теперь понял как это работает. Это типо как в CSS с абсолютным позиционированием - топ/лефт 50%, а потом по минус 50% от маржинов и мы по центру. |
MC-XOBAHCK,
Просто центр вращения надо задать. |
И баг похоже нашёл.
Поставил console.log(v); Результат: ["0", "0", "0400", "0", "030", -3, "0", "0", "030", "03", 370, -3, "0400", "0", 370, "03"] console.log(typeof v[15]); Результат: string Наслаживал... :-? |
Цитата:
|
Цитата:
А вот с масштабированием - наверное в моём случае с размерными стрелками оно не нужно. У меня толщина линии одна и та же, и делать толще её не нужно. Просто при малых размерах сами указатели стрелок меняются (поставил условие через свич на длину стрелки), чтобы допустим при 60px длины стрелки указатели не съехались, а визуально оставалась стрелочка. Параметры свича я со временем подгоню. Против функции ничего не имею, если честно - я её пока не понимаю и не могу внедрить. Я вон канвас только пару дней назад для себя открыл. |
Добрый день!
А можете подсказать, возможно ли сделать скачивание canvasa? В контекстном меню браузера, если навести курсор на канвас и нажать правую кнопку мышки, есть пункт "Сохранить картинку как...". А можно ли это как то повесить на кнопку?
<canvas style="border:1px solid black"></canvas>
<button id="download">Скачать</button>
<script>
const canvas = document.querySelector('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
// Скачать Canvas
document.querySelector('#download').addEventListener('click', function ( ) {
//?????
})
</script>
|
<canvas style="border:1px solid black"></canvas>
<a href="" download="my-file-name.png" href="#"><button id="download">Download</button></a>
<script>
const canvas = document.querySelector('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
// Скачать Canvas
document.querySelector('#download').addEventListener('click', function(){
var dataURL = canvas.toDataURL('image/png');
document.querySelector('a').href = dataURL;
});
</script>
|
j0hnik, спасибо за решение.
Скачал с вашего решения - работает. У меня же скачивает пустой файл. Может быть причина из за того что у меня на локалке, а не на cервере? Думал может из за того что у меня канвас генерируется, исправил код на всплытие но не помогло:
<div class="editor">
<canvas></canvas>
<a href="" download="my-file-name.png" href="#">
<button id="download">Скачать</button>
</a>
</div>
Скрипт:
document.querySelector('.editor').addEventListener('click', function (event) {
if (event.target.id == 'download') {
let canvas = event.target.parentNode.parentNode.querySelector('canvas');
var dataURL = canvas.toDataURL('image/png');
document.querySelector('a').href = dataURL;
}
})
|
Цитата:
|
| Часовой пояс GMT +3, время: 08:36. |