Меню
Что нового?

Похожая функция drawTriangles(flash) на html5?

Katerina1993

Новичок
Здравствуйте, во flash есть функция drawTriangles, которая отображает только часть картинки. Первый параметр это координаты вектора, второй вершины (индекс).

Пример ActionScript 3.0.
Код: 
graphics.drawTriangles(Vector.<Number>([0, 0, width1, 0, 0, height1]),// вектор вершин расположение по x и y
                       Vector.<int>([0, 2, 1])); // вектор с индексами этих вершин
Второй параметр вектор с индексами этих вершин. Каждый индекс ссылается на вершины первого параметра(соответственно по x и y координат).
0 – это (0,0);
2 – это (0,height1)
1 – это (width1,0)
В итоге картинка отрисовывается следующая.
1631
Полный код flash.
Код: 
package
{
  import flash.display.Sprite;
  import flash.display.BitmapData;
  import flash.display.Bitmap;
  public class Main extends Sprite
  {
        var archer1:BitmapData = new archer(0, 0);
        var width1:int = 350;
        var height1:int = 200;
 
        public function Main():void
        {
            var bitmap:Bitmap = new Bitmap(archer1);
            
            graphics.beginBitmapFill(bitmap.bitmapData)
            graphics.lineStyle(1, 0x999999);
            
            
            graphics.drawTriangles(Vector.<Number>([0, 0, width1, 0, 0, height1]),// вектор вершин расположение по x и y
                       Vector.<int>([0, 2, 1])); // вектор с индексами этих вершин
        }
  }
}
Подскажите есть похожая функция drawTriangles flash(ActionScript 3.0.) на html5(JavaScript)?
 
weregod

weregod

unserializer
Екатерина, флэш не поддерживается разработчиками оного, Вас опять нажучивают, перестаньте гоняться за "курсами".
 

Katerina1993

Новичок
Екатерина, флэш не поддерживается разработчиками оного, Вас опять нажучивают, перестаньте гоняться за "курсами".
Нажмите для раскрытия...
Какие курсы, нет никаких курсов. То что flash не поддерживается я знаю. Поэтому и нужно перевести из flash в html5, а этот код мой а не из курса. Просто нашла в папке. Когда-то давно пыталась что-то сделать на flash. Решила перевести код на html5.
 

Katerina1993

Новичок
Мне удалось создать функцию drawTriangles, используя обычные линии. Функция как и у flash принимает два параметра.
1. Вектор вершин расположение по x и y
2. Вектор с индексами этих вершин.
Пример:
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример drawTriangle </title>
<script>
window.onload = function()
{
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
canvas.style.background = "#CCCCCC";

var width1 = 350;
var height1 = 200;

var vertices = [[0,0],[width1,0],[0,height1]];
var indices = [0,2,1];


drawTriangles(vertices,indices);

function drawTriangles(vertices,indices) {

  context.beginPath();
  context.moveTo(vertices[indices[0]][0], vertices[indices[0]][1]);
  context.lineTo(vertices[indices[1]][0], vertices[indices[1]][1]);
  context.lineTo(vertices[indices[2]][0], vertices[indices[2]][1]);
  context.lineTo(vertices[indices[0]][0], vertices[indices[0]][1]);
  context.lineWidth = 1;
  context.fillStyle = 'rgb(158, 0, 214)';
  context.fill();
}



}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="300"></canvas>
</body>
</html>
Как теперь загрузить картинку через drawImage и вырезать от туда картинку в форме треугольника?
 

ksnk

прохожий
Кансасом можно рисовать только прямоугольные картинки. Однако, можно нарисовать прямоугольную картинку, сбросить туда прямоугольный образ из нужного изображения, затем заполнить треугольную область прозрачным цветом. Чтобы было веселее, рисование можно производить в OffscreenCanvas, и затем переносить получившееся изображение в нужный канвас. Задача выглядит не особенно оптимальной, так что возникает вопрос - зачем это нужно? Какая задача решается? Возможно задачу можно и нужно решать более родными для канваса методами.
 

Katerina1993

Новичок
Вообще-то есть решение. Вырезать часть картинки. Вот код вырезает картинку в виде треугольника.
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Загрузка картинки</title>

<script>
var canvas, ctx, img;
window.onload = function()
{
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");
// Создаем объект изображения
var img = new Image();
// Загружаем файл изображения
img.src = "img2.jpg";
img.onload = function()
{
draw(img);

}

function draw(img){

  clippingPath([100,100,150,20,200,100],img,10,10);
}
function clippingPath(pathPoints,img,x,y){
         ctx.save();

        
        ctx.beginPath();
        ctx.moveTo(pathPoints[0],pathPoints[1]);
        
        ctx.lineTo(pathPoints[2],pathPoints[3]);
        ctx.lineTo(pathPoints[4],pathPoints[5]);
        ctx.closePath();   

      
        ctx.lineWidth=2;
        ctx.stroke();

        
        ctx.clip();

      
        ctx.drawImage(img,x,y);
        
        ctx.restore();
}

}
</script>
</head>
<body>
<canvas id="drawingCanvas" style="background:#444444" width="400px" height="300px"></canvas><br>
</body>
</html>
 
Войдите или зарегистрируйтесь для ответа.
Сверху