{"id":14936,"date":"2025-03-12T07:15:15","date_gmt":"2025-03-12T04:15:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/"},"modified":"2025-03-12T07:15:15","modified_gmt":"2025-03-12T04:15:15","slug":"hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/","title":{"rendered":"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon"},"content":{"rendered":"

<\/p>\n

Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon<\/p>\n

Bu makalede, Hightopo’nun g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi HT for Web’i kullanarak 2 boyutlu g\u00f6rselle\u015ftirmeler olu\u015fturmay\u0131 ele alaca\u011f\u0131z. \u00d6zellikle d\u00fc\u011f\u00fcm (node), kenar (edge) ekleme ve animasyonlar uygulama konular\u0131na odaklanaca\u011f\u0131z. Daha \u00f6nceki yaz\u0131lar\u0131mda oldu\u011fu gibi, bu rehber de ad\u0131m ad\u0131m ilerleyecek ve \u00f6rnek kodlar i\u00e7erecektir. Umar\u0131m bu bilgiler, kendi web uygulamalar\u0131n\u0131zda etkileyici g\u00f6rselle\u015ftirmeler olu\u015fturman\u0131za yard\u0131mc\u0131 olur.<\/p>\n

Hightopo HT for Web’e Giri\u015f<\/h2>\n

Hightopo HT for Web, web tabanl\u0131 uygulamalar\u0131n\u0131zda karma\u015f\u0131k grafikleri ve diyagramlar\u0131 kolayca olu\u015fturman\u0131za olanak tan\u0131yan g\u00fc\u00e7l\u00fc bir JavaScript k\u00fct\u00fcphanesidir. Bu k\u00fct\u00fcphane, geni\u015f bir \u00f6zellik yelpazesi sunar; bunlara d\u00fc\u011f\u00fcm ve kenar y\u00f6netimi, animasyonlar, etkile\u015fimli unsurlar ve veri ba\u011flama gibi \u00f6zellikler dahildir. Ayr\u0131ca, \u00f6zelle\u015ftirme se\u00e7enekleri olduk\u00e7a esnektir, b\u00f6ylece projenizin \u00f6zel gereksinimlerine uyacak \u015fekilde \u00f6zelle\u015ftirebilirsiniz. K\u0131sacas\u0131, Hightopo HT for Web web geli\u015ftirme projeleriniz i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r.<\/p>\n

2B G\u00f6rselle\u015ftirme Olu\u015fturma<\/h2>\n

\u0130lk ad\u0131m olarak, basit bir 2B g\u00f6rselle\u015ftirme olu\u015ftural\u0131m. A\u015fa\u011f\u0131daki kod, bir Hightopo grafi\u011fi olu\u015fturur ve ona bir d\u00fc\u011f\u00fcm ekler:<\/p>\n

\n\/\/ Hightopo k\u00fct\u00fcphanesini y\u00fckleyin\n\/\/ ...\n\n\/\/ Yeni bir grafik nesnesi olu\u015fturun\nvar graph = new ht.Graph();\n\n\/\/ Yeni bir d\u00fc\u011f\u00fcm olu\u015fturun\nvar node = new ht.Node();\nnode.setName(\"D\u00fc\u011f\u00fcm 1\");\nnode.setPosition(100, 100);\n\n\/\/ D\u00fc\u011f\u00fcm\u00fc grafi\u011fe ekleyin\ngraph.add(node);\n\n\/\/ Grafi\u011fi ekranda g\u00f6sterin\n\/\/ ...\n<\/code><\/pre>\n
Bu kodda, \u00f6ncelikle Hightopo k\u00fct\u00fcphanesini y\u00fckleriz. Ard\u0131ndan, yeni bir grafik nesnesi olu\u015fturur ve buna “D\u00fc\u011f\u00fcm 1” adl\u0131 bir d\u00fc\u011f\u00fcm ekleriz.  D\u00fc\u011f\u00fcm\u00fcn konumunu da belirtiriz. Son olarak, grafi\u011fi ekranda g\u00f6r\u00fcnt\u00fclemek i\u00e7in gerekli ad\u0131mlar\u0131 atar\u0131z (bu k\u0131s\u0131m, kulland\u0131\u011f\u0131n\u0131z \u00e7er\u00e7eveye ba\u011fl\u0131 olarak de\u011fi\u015febilir).<\/p>\n
Kenar Ekleme<\/h2>\n
\u015eimdi, iki d\u00fc\u011f\u00fcm aras\u0131nda bir kenar ekleyelim.  Kenarlar, d\u00fc\u011f\u00fcmler aras\u0131ndaki ili\u015fkileri g\u00f6sterir.  A\u015fa\u011f\u0131daki kodda,  iki d\u00fc\u011f\u00fcm aras\u0131nda bir kenar olu\u015fturuyoruz:<\/p>\n
\n\/\/ ... (\u00f6nceki kod) ...\n\n\/\/ Yeni bir d\u00fc\u011f\u00fcm daha olu\u015fturun\nvar node2 = new ht.Node();\nnode2.setName(\"D\u00fc\u011f\u00fcm 2\");\nnode2.setPosition(300, 100);\ngraph.add(node2);\n\n\/\/ \u0130ki d\u00fc\u011f\u00fcm aras\u0131nda bir kenar olu\u015fturun\nvar edge = new ht.Edge(node, node2);\ngraph.add(edge);\n<\/code><\/pre>\n
Bu kodda,  “D\u00fc\u011f\u00fcm 2” adl\u0131 yeni bir d\u00fc\u011f\u00fcm olu\u015fturuyoruz ve bunu grafi\u011fe ekliyoruz.  Sonras\u0131nda ise, ht.Edge s\u0131n\u0131f\u0131n\u0131 kullanarak “D\u00fc\u011f\u00fcm 1” ve “D\u00fc\u011f\u00fcm 2” aras\u0131nda bir kenar olu\u015fturuyor ve grafi\u011fe ekliyoruz.  Bu \u015fekilde, iki d\u00fc\u011f\u00fcm aras\u0131nda g\u00f6rsel bir ba\u011flant\u0131 kurmu\u015f oluyoruz.<\/p>\n
Animasyonlar<\/h2>\n
Hightopo,  grafik \u00f6\u011felerine \u00e7e\u015fitli animasyonlar eklemenize olanak tan\u0131r.  \u00d6rne\u011fin, bir d\u00fc\u011f\u00fcm\u00fcn konumunu zaman i\u00e7inde de\u011fi\u015ftirebilirsiniz.  A\u015fa\u011f\u0131daki \u00f6rnekte, bir d\u00fc\u011f\u00fcm\u00fc belirli bir s\u00fcre boyunca hareket ettiriyoruz:<\/p>\n
\n\/\/ ... (\u00f6nceki kod) ...\n\n\/\/ Animasyon fonksiyonu\nfunction animateNode(node, x, y, duration) {\n  ht.Default.animate(node, {\n    x: x,\n    y: y\n  }, duration);\n}\n\n\/\/ D\u00fc\u011f\u00fcm 1'i (100,100)'den (200,200)'e 1 saniyede hareket ettirin\nanimateNode(node, 200, 200, 1000);\n<\/code><\/pre>\n
Bu kod, ht.Default.animate fonksiyonunu kullanarak d\u00fc\u011f\u00fcm\u00fcn konumunu de\u011fi\u015ftirir.  duration parametresi animasyon s\u00fcresini milisaniye cinsinden belirtir.  Bu \u015fekilde,  d\u00fc\u011f\u00fcm\u00fcn ekranda yumu\u015fak bir \u015fekilde hareket etmesini sa\u011flayabiliriz. Daha karma\u015f\u0131k animasyonlar i\u00e7in,  Hightopo’nun animasyon API’sini inceleyebilirsiniz.  Daha fazla bilgi i\u00e7in Hightopo dok\u00fcmanlar\u0131na<\/a> g\u00f6z atabilirsiniz.<\/p>\n
Sonu\u00e7 olarak, Hightopo HT for Web,  web uygulamalar\u0131n\u0131zda etkileyici ve interaktif 2B g\u00f6rselle\u015ftirmeler olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.  D\u00fc\u011f\u00fcm, kenar ve animasyon \u00f6zellikleriyle, karma\u015f\u0131k verileri anla\u015f\u0131l\u0131r ve g\u00f6rsel olarak \u00e7ekici bir \u015fekilde sunabilirsiniz.  Kendi projelerinizde bu k\u00fct\u00fcphaneyi deneyerek,  potansiyelini ke\u015ffedebilirsiniz.  Daha fazla bilgi ve \u00f6rnek i\u00e7in web sitemi<\/a> ziyaret edebilirsiniz.<\/p>\n
#Etiketler: Hightopo, HT for Web, 2B g\u00f6rselle\u015ftirme, d\u00fc\u011f\u00fcm, kenar, animasyon, JavaScript, grafik k\u00fct\u00fcphanesi, web geli\u015ftirme<\/p>\n
<\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon Bu makalede, Hightopo’nun g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi HT…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-14936","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nHightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon<\/title>\n<meta name=\"description\" content=\"Bu makalede, Hightopo'nun g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi HT for Web'i kullanarak 2 boyutlu g\u00f6rselle\u015ftirmeler olu\u015fturmay\u0131 ele alaca\u011f\u0131z. \u00d6zellikle d\u00fc\u011f\u00fcm (node), kenar (edge) ekleme ve animasyonlar uygulama konular\u0131na odaklanaca\u011f\u0131z. Daha \u00f6nceki yaz\u0131lar\u0131mda oldu\u011fu gibi, bu rehber de ad\u0131m ad\u0131m ilerleyecek ve \u00f6rnek kodlar i\u00e7erecektir. Umar\u0131m bu bilgiler, kendi web uygulamalar\u0131n\u0131zda etkileyici g\u00f6rselle\u015ftirmeler olu\u015fturman\u0131za yard\u0131mc\u0131 olur.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon\" \/>\n<meta property=\"og:description\" content=\"Bu makalede, Hightopo'nun g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi HT for Web'i kullanarak 2 boyutlu g\u00f6rselle\u015ftirmeler olu\u015fturmay\u0131 ele alaca\u011f\u0131z. \u00d6zellikle d\u00fc\u011f\u00fcm (node), kenar (edge) ekleme ve animasyonlar uygulama konular\u0131na odaklanaca\u011f\u0131z. Daha \u00f6nceki yaz\u0131lar\u0131mda oldu\u011fu gibi, bu rehber de ad\u0131m ad\u0131m ilerleyecek ve \u00f6rnek kodlar i\u00e7erecektir. Umar\u0131m bu bilgiler, kendi web uygulamalar\u0131n\u0131zda etkileyici g\u00f6rselle\u015ftirmeler olu\u015fturman\u0131za yard\u0131mc\u0131 olur.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-12T04:15:15+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon\",\"datePublished\":\"2025-03-12T04:15:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/\"},\"wordCount\":576,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/\",\"name\":\"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-03-12T04:15:15+00:00\",\"description\":\"Bu makalede, Hightopo'nun g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi HT for Web'i kullanarak 2 boyutlu g\u00f6rselle\u015ftirmeler olu\u015fturmay\u0131 ele alaca\u011f\u0131z. \u00d6zellikle d\u00fc\u011f\u00fcm (node), kenar (edge) ekleme ve animasyonlar uygulama konular\u0131na odaklanaca\u011f\u0131z. Daha \u00f6nceki yaz\u0131lar\u0131mda oldu\u011fu gibi, bu rehber de ad\u0131m ad\u0131m ilerleyecek ve \u00f6rnek kodlar i\u00e7erecektir. Umar\u0131m bu bilgiler, kendi web uygulamalar\u0131n\u0131zda etkileyici g\u00f6rselle\u015ftirmeler olu\u015fturman\u0131za yard\u0131mc\u0131 olur.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon","description":"Bu makalede, Hightopo'nun g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi HT for Web'i kullanarak 2 boyutlu g\u00f6rselle\u015ftirmeler olu\u015fturmay\u0131 ele alaca\u011f\u0131z. \u00d6zellikle d\u00fc\u011f\u00fcm (node), kenar (edge) ekleme ve animasyonlar uygulama konular\u0131na odaklanaca\u011f\u0131z. Daha \u00f6nceki yaz\u0131lar\u0131mda oldu\u011fu gibi, bu rehber de ad\u0131m ad\u0131m ilerleyecek ve \u00f6rnek kodlar i\u00e7erecektir. Umar\u0131m bu bilgiler, kendi web uygulamalar\u0131n\u0131zda etkileyici g\u00f6rselle\u015ftirmeler olu\u015fturman\u0131za yard\u0131mc\u0131 olur.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/","og_locale":"tr_TR","og_type":"article","og_title":"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon","og_description":"Bu makalede, Hightopo'nun g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi HT for Web'i kullanarak 2 boyutlu g\u00f6rselle\u015ftirmeler olu\u015fturmay\u0131 ele alaca\u011f\u0131z. \u00d6zellikle d\u00fc\u011f\u00fcm (node), kenar (edge) ekleme ve animasyonlar uygulama konular\u0131na odaklanaca\u011f\u0131z. Daha \u00f6nceki yaz\u0131lar\u0131mda oldu\u011fu gibi, bu rehber de ad\u0131m ad\u0131m ilerleyecek ve \u00f6rnek kodlar i\u00e7erecektir. Umar\u0131m bu bilgiler, kendi web uygulamalar\u0131n\u0131zda etkileyici g\u00f6rselle\u015ftirmeler olu\u015fturman\u0131za yard\u0131mc\u0131 olur.","og_url":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-03-12T04:15:15+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon","datePublished":"2025-03-12T04:15:15+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/"},"wordCount":576,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/","url":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/","name":"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-03-12T04:15:15+00:00","description":"Bu makalede, Hightopo'nun g\u00fc\u00e7l\u00fc JavaScript k\u00fct\u00fcphanesi HT for Web'i kullanarak 2 boyutlu g\u00f6rselle\u015ftirmeler olu\u015fturmay\u0131 ele alaca\u011f\u0131z. \u00d6zellikle d\u00fc\u011f\u00fcm (node), kenar (edge) ekleme ve animasyonlar uygulama konular\u0131na odaklanaca\u011f\u0131z. Daha \u00f6nceki yaz\u0131lar\u0131mda oldu\u011fu gibi, bu rehber de ad\u0131m ad\u0131m ilerleyecek ve \u00f6rnek kodlar i\u00e7erecektir. Umar\u0131m bu bilgiler, kendi web uygulamalar\u0131n\u0131zda etkileyici g\u00f6rselle\u015ftirmeler olu\u015fturman\u0131za yard\u0131mc\u0131 olur.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/hightopo-ht-for-web-ile-2b-gorsellestirme-dugum-kenar-ve-animasyon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Hightopo HT for Web ile 2B G\u00f6rselle\u015ftirme: D\u00fc\u011f\u00fcm, Kenar ve Animasyon"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/14936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=14936"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/14936\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=14936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=14936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=14936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}